Interwikiの自動調整に必要なもの

モックそのものはサンドボックスから呼んでいる

+ show block


InterWikiの下 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>InterWikiContainer</title>
<style>
body{
padding:0;
}
iframe{
margin:0;
padding:0;
}
</style>
<script type="text/javascript">
var isResized = false;
var count = 0;
var Container;
var sendHash;
var Memory = 0;
document.addEventListener("DOMContentLoaded",function(){
//InterWiki埋め込み部分(ここではc-takeのサンドボックスにあるモックを呼んでいる)
var MyURL = location.href;
var MyURLArray = MyURL.split("#");
sendHash = "";
if(MyURLArray.length > 1){
sendHash = "#" + MyURLArray[1];
}
Container = document.createElement("iframe");
Container.src = "http://scp-jp-sandbox2.wikidot.com/c-take/code/1"+sendHash;
Container.height = "0";
Container.allowtransparency="true";
Container.setAttribute("style","border:none;");
Container.frameborder="0";
Container.scrolling="no";
ContainerContainer.appendChild(Container);
 
tryPostMessage();
window.addEventListener("message",function(event){
if(getMyHeight() == 0){return;}
if(isResized){
Container.contentWindow.postMessage("I got your Height","*");
}
if(!isResized){
var Height = Number(event.data);
Memory = Height;
if(Memory == Height && (Number(Container.height) !=0 )){
return;
}
Container.height = String(Height);
//isResized = true;
RefuseNone.parentNode.removeChild(RefuseNone);
setTimeout(createResizeIframe,5);
}
 
function createResizeIframe(){
var Referrer = document.referrer;
var Mydomain = Referrer.split("//").join("/").split("/")[1];
 
var Height = Number(Container.height)+10;
var iframe = document.createElement("iframe");
iframe.src = "http://"+Mydomain+"/common--javascript/resize-iframe.html" + "?" +"InterwikiResize"+ "#" + Height + "/1"+sendHash;
iframe.style.display = "none";
iframeSet.appendChild(iframe);
}
 
    function getMyHeight() {
        if (document.body.scrollHeight) {
            return document.body.scrollHeight;
        }
        if (document.height) {
            return document.height;
        }
        return document.body.offsetHeight;
    };
});
function tryPostMessage(){
if(!isResized){
Container.contentWindow.postMessage("Request your Height","*");
setTimeout(tryPostMessage,5);
}
}
});
</script>
</head>
<body>
<div id="RefuseNone" style="height:10px"></div>
<div id="ContainerContainer">
</div>
<div id="iframeSet"></div>
</body>
</html>

InterWikiのモック

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>SCPNET Interwikiもっく</title>
    <base target="_parent" />
    <style>
    body {
        margin: 0;
        padding: 5px;
        font-size: 0.80em;
    }
    /* width: 217px; */
    .interwiki {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        padding: 10px;
        border: 1px solid #660000;
        border-radius: 10px;
        box-shadow: 0 2px 6px rgba(102,0,0,.5);
        background: #fff;
        margin: 0;
        box-sizing: border-box;
        width: 16.25em;
    }
    .interwiki__title {
        color: #600;
        border-bottom: solid 1px #600;
        padding-left: 15px;
        margin-top: 10px;
        margin-bottom: 5px;
        font-size: 8pt;
        font-weight: bold;
    }
    .interwiki__entry {
        position: relative;
    }
    .interwiki__entry:before {
        content: "■";
        font-size: 7px;
        color: #b01;
        position: relative;
        margin: 0 7px 0 5px;
        bottom: 3px;
    }
    .interwiki__entry a, .interwiki__entry a:visited {
        font-weight: bold;
        color: #b01;
        text-decoration: none;
        background: transparent;
    }
    .interwiki__entry a:hover {
        text-decoration: underline;
    }
    @media (min-width: 14.375em) {
        .interwiki {
            width: 17em;
        }
    }
    </style>
</head>
 
<!-- ↓これが自動調整に必要なスクリプトです -->
<script type="text/javascript">
var isResizeCatch = false;//Trigger
var ParentWindow;//Contain Parent Frame
var mainDiv;
document.addEventListener("DOMContentLoaded",function(){
    //Get Parent Frame
    ParentWindow = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
mainDiv = document.getElementById("interwiki");
 
    //Set Event Method that if It catched Message from Parent Frame
    window.addEventListener("message",function(event){
        switch(event.data){
            case "Request your Height":
                //If it receive request,it begin send own heigth to parent frame
                isResizeCatch = false;
                    //If getting own parent frame was successed,It start to post own height to parent frame
                    mainDiv.style.border = "none";
                if (typeof(ParentWindow) != "undefined") {
                    postMyHeight();
                }
            break;
            case "I got your Height":
                //If it receive resize completed message,It stop sending
                isResizeCatch = true;
            break;
        }
    });
 
    //Post Method
    function postMyHeight(){
        //post
        ParentWindow.postMessage(getMyHeight(),"*");
        //Repeated action for transmission failure
        if(!isResizeCatch){
            setTimeout(postMyHeight,5);
        }
    }
 
    function getMyHeight() {
        //Operation to acquire the height according to the browser
        if (document.body.scrollHeight) {
            return document.body.scrollHeight;
        }
        if (document.height) {
            return document.height;
        }
        return document.body.offsetHeight;
    };
});
 
</script>
<body>
    <div class="interwiki">
        <div class="interwiki__title">他言語版</div>
        <div class="interwiki__entry"><a href="http://scp-wiki-cn.wikidot.com/main">中文</a></div>
<div class="interwiki__entry"><a href="http://www.scp-wiki.net/main">English</a></div>
<div class="interwiki__entry"><a href="http://scp-wiki-de.wikidot.com/main">Deutsch</a></div>
<div class="interwiki__entry"><a href="http://fondazionescp.wikidot.com/main">Italiano</a></div>
<div class="interwiki__entry"><a href="http://ko.scp-wiki.net/main">한국어</a></div>
<div class="interwiki__entry"><a href="http://scp-wiki.net.pl/main">Polski</a></div>
<div class="interwiki__entry"><a href="http://scpfoundation.ru/main">Русский</a></div>
<div class="interwiki__entry"><a href="http://scp-th.wikidot.com/main">ภาษาไทย</a></div>
</div>
    <!-- SCP Foundation Russia Networks -->
</body>
</html>

CodeBlockを介してInterwikiを起動する

<!DOCTYPE html>
<html>
<head>
<title>InterWikiContainer</title>
<style>
body{
padding:0;
}
iframe{
margin:0;
padding:0;
}
</style>
<script type="text/javascript">
var isResized = false;
var Container;
var mySite;
document.addEventListener("DOMContentLoaded",function(){
mySite = document.referrer;
mySite = mySite.split("http://").join("");
mySite = "http://" + mySite.split("/")[0] + "/";
 
//InterWiki埋め込み部分
var MyURL = location.href;
var MyURLArray = MyURL.split("#");
Container = document.createElement("iframe");
Container.src = "http://scpnet.org/interwiki/scp-jp/?" + MyURLArray[1];
Container.allowtransparency="true";
Container.frameborder="0";
Container.scrolling="no";
ContainerContainer.appendChild(Container);
 
window.addEventListener("message",function(event){
Container.contentWindow.postMessage("I got your Height","*");
if(!isResized){
var Height = Number(event.data);
Container.height = String(Height);
isResized = true;
setTimeout(createResizeIframe,5);
}
 
function createResizeIframe(){
var Height = getMyHeight();
var iframe = document.createElement("iframe");
iframe.src = mySite + "common--javascript/resize-iframe.html" + "?" +"InterwikiResize"+ "#" + Height + "/3";
iframe.style.display = "none";
iframeSet.appendChild(iframe);
}
 
    function getMyHeight() {
        if (document.body.scrollHeight) {
            return document.body.scrollHeight;
        }
        if (document.height) {
            return document.height;
        }
        return document.body.offsetHeight;
    };
});
});
</script>
</head>
<body>
<div id="ContainerContainer">
</div>
<div id="iframeSet"></div>
</body>
</html>

InterWikiに必要なスクリプト

//これはInterWikiをiframeで呼び出す別のページ(親フレーム)を用意し、
//その親フレームをSCP財団のページに埋め込む事を想定して作られたスクリプトです。
//Interwikiの大きさに合わせて親フレームの高さを調整する為のスクリプトです。
 
var isResizeCatch = false;//親フレームが大きさ変更を完了したかを格納します
var ParentWindow;//親フレーム要素を格納します
document.addEventListener("DOMContentLoaded",function(){
    //親フレーム要素を取得します
    ParentWindow = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
 
    //親フレームからメッセージを受けっとった場合の動作を設定します
    window.addEventListener("message",function(event){
        switch(event.data){
            case "Request your Height":
                //親フレームからInterwikiの大きさを取得する要求があった場合
                isResizeCatch = false;
                //親フレームの取得に成功していた場合、親フレームにInterwikiのページの高さを送信する動作を開始します
                if (typeof(ParentWindow) != "undefined") {
                    postMyHeight();
                }
            break;
            case "I got your Height":
                //親フレームから高さの調整が完了したというメッセージを受けとった場合、送信を停止します
                isResizeCatch = true;
            break;
        }
    });
 
    //送信動作
    function postMyHeight(){
        //親フレームにInterwikiのページの高さを送信します
        ParentWindow.postMessage(getMyHeight(),"*");
        //送信が失敗した場合に備えた繰り返し動作です
        if(!isResizeCatch){
            setTimeout(postMyHeight,5);
        }
    }
 
    //Interwikiのページの高さの取得
    function getMyHeight() {
        //ブラウザに対応したページの高さを取得する動作です
        if (document.body.scrollHeight) {
            return document.body.scrollHeight;
        }
        if (document.height) {
            return document.height;
        }
        return document.body.offsetHeight;
    };
});
page revision: 78, last edited: 04 Feb 2018 14:11
Edit Rate (0) Tags History Files Print Site tools + Options
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License