勉強したことのメモ

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

関連記事

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

直近で調べたのとは別に、 http://aaa.bbb/ccc/id123?te ...

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

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

: JavaScriptだけでTOPへ戻るリンクの表示

ページ内をある程度スクロールするとTOPへ戻るリンクを表示させたかった。ただ ...

: GoogleMapでマーカーをまとめる

GoogleMapAPIでマーカーを複数表示し、近隣のエリアごとにまとめて表示さ ...

: javascriptのfor文で負荷軽減

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

: 他サイトのRSS情報を画像付きで表示させる

WordPressでAというサイトを作成し、AのRSS情報をBというサイトでアイ ...

: getElementsByTagName

うろ覚えだけど業務中に、 document.getElementById('aa ...

: javascriptでのエラーログ

PHPでのエラーログ取りが思いのほか便利だったので JSについても簡単にログ取り ...

: JavaScriptの三項演算子

いつもと違う書き方？　使い方の三項演算子があったのでメモ。 ■ソース var ...

: javascriptでメモリ開放

今まで考えたこと無かったけどjavascriptを使う際はメモリ消費に気をつけ ...

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
- その他
- アプリ
- エラー管理
- サーバー
- ドメイン
- ブラウザ
- モバイル
- 正規表現
- 画像