勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

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

2013/10/13 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>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<!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="https://aaa.com/iframe.html" scrolling="no" >
 </iframe>
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<!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

関連記事

: 異なる文字コード間でform送信する

formの送り手がUTF-8で受け手がEUC-JP、なんとかしてjavascr ...

: テキストエリアのリアルタイムプレビュー

テキストエリア内に書いた内容をリアルタイムでプレビューする機能が必要となり、教 ...

: 八地方区分→都道府県→路線→駅名の連携したセレクトメニュー

八地方区分(関東、近畿等)をプルダウンから選ぶと区分内の都道府県プルダウンが表示 ...

: JavaScriptでcookieの保存

JavaScriptでcookieを保存したかったけど方法が分からなかったので ...

: javascriptでスクロール

やりたかった事は、・javascript,jQuery使う・スクロールさせた ...

: javascriptの文末

下記みたいなコードがあって、文末に｢;｣が無いのになんで動くのこれ？　となった ...

: javascriptで画像を取り扱う際の注意

javascriptで画像を取り扱う際に、ちゃんと要素を指定しているのにも関わ ...

: javascriptで月末日を取得

以前、PHPで月末日を取得したけれども javascriptで月末日を扱いたいケ ...

: javascriptのfor文で負荷軽減

javascriptで配列の数だけループをまわす際、 for (i=0; i&l ...

: GoogleMapsAPIでマーカーが全て表示されるように自動ズーム

GoogleMapsAPIでマーカーを複数設置した場合にズームの値や、マーカーの ...

PREV: JavaScriptでURLのクエリを取得する
NEXT: JavaScriptでURLのクエリを取得する２

新着記事

: ACFでセレクトメニューを動的に生成

WordPressでカスタムフィールド設定用のプラグインAdvanced Cus ...

: 八地方区分→都道府県→路線→駅名の連携したセレクトメニュー

八地方区分(関東、近畿等)をプルダウンから選ぶと区分内の都道府県プルダウンが表示 ...

: サーバ内でバージョン確認方法のまとめ

OSやApacheのバージョンを確認する際にいつもググっていたので、調べやすいよ ...

: CentOS6.10に無料SSL(Let's Encrypt)を導入

以前にもVPSにLet's Encryptを導入するという記事を書いたが、テスト ...

: VPSにMovableTypeをインストール

VPSにMovableTypeをインストールしたかった。バージョン7系はインスト ...

カテゴリー
- Ajax
- CMS
- CSS
- Flash
- htaccess
- HTML
- JavaScript
- jQuery
- memcached
- MovableType
- MySQL
- MySQLi
- PHP
- redis
- Ruby
- SEO
- SQLite
- VPS
- WordPress
- その他
- アプリ
- エラー管理
- サーバー
- ドメイン
- ブラウザ
- モバイル
- 正規表現
- 画像