htmlの親子iframeで双方向にメッセージを送信する例
ある日、リーダーから、入れ子になったiframe内のメインページと、親子ページが双方向にメッセージを送るという要件が提示されました。そこで私は、postMessageという解決策を思いつきました。
知識準備の理論。
postMessageメソッドは、異なるソースのスクリプトが非同期メソッドを使用して限定的に通信することを可能にし、クロステキストファイル、マルチウィンドウ、およびクロスドメインメッセージングを可能にします。
シンタックス
otherWindow.postMessage(message, targetOrigin, [transfer]);
- otherWindow: iframeのcontentWindow、window.openの実行により返されるウィンドウ オブジェクト、名前付きまたは数値インデックス付きのwindow.framesなど、別のウィンドウへの参照です。
- message: 他のウィンドウに送信されるデータ。
- targetOrigin: メッセージイベントを受信できるウィンドウを指定します。この値には、無制限の文字列 "*" または URI を指定できます。
- transfer: メッセージとともに渡される Transferable オブジェクトの文字列で、その所有権はメッセージの受信者に移り、送信者はもはや所有権を保持しません。
postMessage メソッドを呼び出すと、すべてのページスクリプトが実行された後、ターゲットウィンドウに MessageEvent メッセージがディスパッチされる。MessageEventメッセージには、注意すべき4つのプロパティがあります。
- type: メッセージの種類を表します。
- data: postMessageの最初のパラメータ
- origin: postMessage メソッドウィンドウのソースを示します。
- source: postMessage メソッドを呼び出したウィンドウオブジェクトを記録します。
運用の流れは以下の通りです。
1. 2ページを用意する
- http://a.com/main.html メインページ
- http://b.com/iframepage.html ネストされたページ
main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iframe+postMessage Cross-Domain Communication Main Page</title>
</head>
<body>
<h1>main page</h1>
<iframe id="child" src="http://b.com/iframepage.html"></iframe>
<div>
<h2>Main page receiving message area</h2>
<span id="message"></span>
</div>
</body>
</html>
iframepage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iframe+postMessage cross-domain communication Subpages</title>
</head>
<body>
<h2> subpages</h2>
<div>
<h3>Receive message area</h3>
<span id="message"></span>
</div>
</body>
</html>
2. 親が子へメッセージを送る
main.html
<script>
window.onload = function(){
document.getElementById('child')
.contentWindow.postMessage("main page message",
"http://b.com/iframepage.html")
}
</script>
注意事項
必ずページが読み込まれた後にメッセージを送信してください。そうしないと、iframeの読み込みが終了していないため、エラーが報告されます。
DOMWindow' の 'postMessage' の実行に失敗しました。
サブページがメッセージを受信しています。
iframepage.html
<script>
window.addEventListener('message',function(event){
console.log(event);
document.getElementById('message').innerHTML = "received"
+ event.origin + "message:" + event.data;
}, false);
</script>
この時点で、ページ上のiframeのサブページが印刷されていることが確認できます
受信 http://a.com メッセージ: メインページメッセージ`。
と表示され、コンソールに MessageEvent オブジェクトが表示されます。
3. 子は親にメッセージを送る
メッセージを受け取った子ページは、親ページに返信する
iframepage.html
<script>
window.addEventListener('message',function(event){
console.log(event);
document.getElementById('message').innerHTML = "received"
+ event.origin + "message:" + event.data;
top.postMessage("Subpage message received", 'http://a.com/main.html')
}, false);
</script>
親ページはメッセージを受信して表示します。
window.addEventListener('message', function(event){
document.getElementById('message').innerHTML = "Received"
+ event.origin + "message:" + event.data;
}, false);
4. フルコード
main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iframe+postMessage Cross-Domain Communication Main Page</title>
</head>
<body>
<h1>main page</h1>
<iframe id="child" src="http://b.com/iframepage.html"></iframe>
<div>
<h2>Main page receiving message area</h2>
<span id="message"></span>
</div>
</body>
<script>
window.onload = function(){
document.getElementById('child')
.contentWindow.postMessage("main page message",
"http://b.com/iframepage.html")
}
window.addEventListener('message', function(event){
document.getElementById('message').innerHTML = "received"
+ event.origin + "message:" + event.data;
}, false);
</script>
</html>
iframepage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iframe+postMessage cross-domain communication Subpages</title>
</head>
<body>
<h2> subpages</h2>
<div>
<h3>Receive message area</h3>
<span id="message"></span>
</div>
</body>
<script>
window.addEventListener('message',function(event){
if(window.parent ! == event.source){return}
console.log(event);
document.getElementById('message').innerHTML = "received"
+ event.origin + "message:" + event.data;
top.postMessage("Subpage message received", 'http://a.com/main.html')
}, false);
</script>
</html>
この記事は、htmlの親子ページiframeの双方向メッセージの実装例について、これに導入され、より関連するhtmlの親子ページiframeの双方向メッセージの内容は、スクリプトホーム以前の記事を検索するか、次の関連記事を閲覧し続け、私はあなたが将来的に多くのスクリプトホームをサポートして願っています！。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン