.png)
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"]]
実装: