クロスドメインのiframeで子フレームから親フレームにheightの値を渡す
2014/07/09
やりたかった事は、
・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
関連記事
-
-
Push.jsを用いてプッシュ通知を実装&Web Audio APIで通知音も鳴らす方法
プッシュ通知(デスクトップ通知)を実装してみたい。また、通知の際は分かりやすいよ ...
-
-
AjaxのJSONP使用でPHPで作った配列をJSに返す方法
AというサイトからBというサイトにAjax通信し、Bの方ではMySQLに接続して ...
-
-
HTMLとJavaScriptのソースコードの暗号化(難読化)
サーバーサイドはソースを見られないけどクライアントサイドはソースを見られるので、 ...
-
-
jQueryでformの各種パーツ(テキストボックス等)の操作まとめ
jQueryでフォームのセレクトメニューやラジオボタン等、各種パーツを操作するこ ...
-
-
画像にマウスを合わせると拡大表示させる「drift」ライブラリの利用方法
amazon等ECサイトで商品画像にマウスを合わせると当該部分が拡大表示されると ...