勉強したことのメモ

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

関連記事

: Ajaxでプラグイン無しのファイルアップロード

画像ファイルを添付できて、尚且つAjaxを用いた非同期通信のフォームを作りたかっ ...

: highcharts.jsについて

プログラムの作りかえを行う際、既存のソースで highcharts.jsを使って ...

: alert後にページ遷移

JavaScriptのalertが閉じたらページ遷移させてほしいと言われ、con ...

: JavaScriptのvarとletとconst

JavaScript関連の調べ物をしていた際、変数の宣言時にvarではなくlet ...

: 複数のajax処理の結果をまとめて表示

同時にajax処理を行う際、挙動やコードの書き方に悩まされることが多い。例えばA ...

: JavaScriptでフォームの禁止ワード制限

掲示板等で本文を送信する際に、予め定めていた禁止ワードが含まれていないかチェック ...

: formでdisplay:none;にしてても送信される

formで特定の部分をdisplay:none;で非表示にしてても内容は送信さ ...

: javascriptで論理和演算子の特殊な使い方

論理和「||」の特殊な使い方を教わったのでメモ。普段使うのは、 if (a = ...

: JavaScriptで連想配列を数値でソート

数字の大きい順でソートしたかったんだけど、色々調べてhash.sort云々やっ ...

: サイトにHTMLエディタ(WYSIWYG)を導入する方法

シンプルで導入が簡単、且つ日本語化されているウィジウィグを探しており、良さそうな ...

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

新着記事

: WordPressでテーマ内の共通の変数

WordPressでテーマ内の共通変数を設定し使用したかった。例えば記事一覧ペー ...

: JavaScriptのvarとletとconst

JavaScript関連の調べ物をしていた際、変数の宣言時にvarではなくlet ...

: WordPressで記事毎に設定した広告を表示させる方法

WordPressでGoogleアドセンスのようなクリック広告ではなく、商品を指 ...

: WPのget_the_contentsでpタグが挿入されない

WordPressのテーマを編集した際に表示が崩れるという症状が発生した。編集内 ...

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

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

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