タグ別アーカイブ: iframe

HTML

クロスドメインでiframeの親に値を渡す。

コメントをどうぞ

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>

な感じで高さを渡す。

これで読み込み時に高さを判断して自動で調整してくれるはず。