iframeについてメモ。
iframeはセキュリティーの都合上で、別ドメインでは値を渡せないらしい。
実際ためしてみても、うまく行かなかった。
使用用途としては、スクロールバーなどを表示させずにインラインフレームとして表示する場合に、横幅は100%で対応できても高さがページによって可変な場合がある。
この場合は、スクロールバーが表示されるか、やけに下に余白ができる感じになってしまい実用的ではない。
そこで、高さの値を子から親へ渡して、iframeの属性で高さを指定できるようにする。
色々調べて今のところこの方法でいけた。
でも、IE6～7までは見対応なのでそのへんはあしからず。逆に対応できる方法を知っている人教えてください。
それではやり方。
まず子のファイルに下記内容が飛鳥
<script type="text/javascript">
function onlo(){
var height = document.getElementById("inHeight").offsetHeight;
document.getElementById("hei").value = height;
parent.postMessage(document.getElementById("hei").value, "*");
}
</script>
</head>
<body onload="onlo()">
<input type="hidden" id="hei" />
<div id="inHeight">
//////中身///////
</div>
</body>
</html>
これは、基本となる高さををoffsetHeightで取得して、inputで渡している。
親側の受け取りはonmessageで受け取る。
<input type=”hidden” id=”hei” />にvalue属性に値を渡している。
document.getElementById("hei").value = height;
その後の
parent.postMessage(document.getElementById("hei").value, "*");
で親に渡す。
親側は・・・・
<script type="text/javascript">
window.onmessage = function(e){
document.getElementById('blockrandom').height = e.data+'px';
}
</script>
<iframe
name="myframe"
id="blockrandom"
src="http://www.----ここに子のURLを入れる-----"
scrolling="no"
frameborder="0"
width="100%"
>
</iframe>
な感じで高さを渡す。
これで読み込み時に高さを判断して自動で調整してくれるはず。