iframe要素自動高さ調整
document.addEventListener("DOMContentLoaded",function(){
    var mySite = document.referrer;
    mySite = mySite.split("http://").join("");
    mySite = "http://" + mySite.split("/")[0] + "/";
 
    var iframeSet = document.getElementById('iframeset');
    var oldHeight = 0;
 
    var url = location.href;
    url = url.replace(/^.*\//,'/');
 
    createResizeIframe();
 
    function createResizeIframe(){
 
        var Height = getMyHeight();
        var iframe = document.createElement("iframe");
        var CacheBreak = String(Math.floor(Math.random() * 10000));
 
        if(Height != oldHeight){
            iframeSet.innerHTML = '';
            iframe.src = mySite + "common--javascript/resize-iframe.html?" + CacheBreak + "#" + Height +url;
            iframe.style.display = "none";
 
            iframeSet.appendChild(iframe);
            oldHeight = Height;
        }
        setTimeout(createResizeIframe,50);
   }
 
    function getMyHeight() {
 
        return iframeSet.getBoundingClientRect().top;
    };
});

使い方

iframe内コード: iframeに埋め込むhtmlに高さ自動調整のjsを適用させる。この時、コードのコピペではなく、下記のscriptタグを埋め込む(カスペルスキー対策)。

<script type="text/javascript" src="http://shitake-crude-production.wdfiles.com/local--code/extension%3Aifarame-htmlblock/1"></script>

iframeに埋め込むhtmlのbodyの最後に必ず

<div id="iframeset"></div>

を加える。この要素の中に高さ自動調整用の(Wikidotに接続する)iframeが入り、更にこの要素の位置から現在表示すべきiframeの高さを取得する。

iframeのコード: iframeを以下の様に設置する。

[[iframe hogehoge class="html-block-iframe" allowtransparency="true" style="height: 0px;" frameborder="0" scrolling="no"]]

注意

同一のurlに対して2つ以上の高さ自動調整付きのiframeを設置するとバグが発生する。

デモ

iframe内コード:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>SCPNET Interwiki</title>
    <script type="text/javascript" src="http://shitake-crude-production.wikidot.com/extension:ifarame-htmlblock/code/1"></script>
     <script type="text/javascript">
          window.onload = function(){
                 var hash = location.href.split('#');
                 hash = hash[hash.length-1];
                 document.querySelector('#hash').innerHTML = hash;
 
          }
     </script>
</head>
<body>
<div style="height:100px">
aaaaaaaaaaaaa<br />
<span id="hash"></span>
</div>
<div id="iframeset">
</div>
</body>
</html>

iframeコード:

[[iframe http://shitake-crude-production.wikidot.com/extension:ifarame-htmlblock/code/2#hoge class="html-block-iframe" allowtransparency="true" style="height: 0px;" frameborder="0" scrolling="no"]]

実装:

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License