クロスドメインの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
関連記事
-
-
PHPで画像を分割し並べ替えて出力したものをJavaScriptで復元する方法
ある電子書籍サイトをブラウザの開発者ツールで見てみたところ、PHPでページ画像を ...
-
-
Video.jsで動画再生開始時と終了時に指定したアクションを発火させる方法
以前にYouTube埋め込み動画が再生終了したタイミングでJavaScriptの ...
-
-
「slick」でarrows(次に進む・前に戻るボタン)を設定しても表示されない場合の対応方法
「slick」で画像スライダーを表示する際にarrows(次に進む・前に戻るボタ ...
-
-
JavaScriptでWebカメラやスマホカメラを利用してQRコードを読み取りURLを返す方法
JavaScriptのjsQRというライブラリで簡単にWebページ版QRコードリ ...
-
-
iPhoneにホーム画面登録を促すダイアログを表示
スマホ用のサイトでお気に入り登録を促すというのは以前に無理という結論が出たけれど ...