勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

クロスドメインのiframeで子フレームから親フレームにheightの値を渡す

   2014/07/09  JavaScript

やりたかった事は、

・iframeで子フレームから親フレームにheightの値を渡して、
親フレームの枠を自動で調整したい
・クロスドメインな状況
・子フレーム側の操作によってサイズが変わる

というもの。

 

■子フレーム側

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<script type="text/javascript">
window.addEventListener("load", postSize, false);
function postSize(e){
 var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
 if (typeof target != "undefined" && document.body.scrollHeight) {
   target.postMessage(document.getElementById("foo").scrollHeight, "*");
 }
}
</script>
</head>
<body>
 <div id="foo" style="height: 1500px; background:red;"></div>
</body>
</html>

 

■親フレーム側

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
window.addEventListener("message", receiveSize, false);
function receiveSize(e) {
 if (e.origin === "http://aaa.com") { //子フレームのドメイン入れる
   console.log(e.data); //ここにheightの値入る
 }
}
</script>
</head>
<body>
 <iframe id="bar" src="http://aaa.com/iframe.html" scrolling="no" >
 </iframe>
</body>
</html>

 

 

■参考サイト
http://d.hatena.ne.jp/bannyan/20090820/1250789189
http://sugilog.hatenablog.com/entry/20111130/1322653985

 

■その他
子フレーム側はonClickとか好きに呼び出せば良し。

postMessageって何、となったので調べると
「安全にクロスドメイン通信を可能にするためのメソッド」らしい。

https://developer.mozilla.org/ja/docs/DOM/window.postMessage

 - JavaScript

  関連記事

JavaScriptでダミー画像(プレースホルダー画像)を表示する「Holder.js」ライブラリの利用方法

サイトの開発段階で「本番用の画像はまだ用意できていない」等の理由によりダミー画像 ...

フォームで画像をとりあつかう際にBase64エンコードした上で送信する方法

PHP等サーバサイド系の言語は利用不可(JSは利用可)な環境でformを作成し画 ...

JavaScriptでUNIXタイムスタンプ取得

UNIXタイムスタンプを用いた際、 年月日からすぐUNIXタイムスタンプを出した ...

jQueryにて特定のIDが存在するかチェックし分岐処理する方法

jQueryにて特定のIDが存在するかチェックし分岐処理したいというケースがあっ ...

「display: block !important;」指定された要素をjQueryで非表示にする方法

jQueryで特定の要素を非表示にしたかったのでhide()を使用したところ非表 ...