HTML iframe で親ページと子ページ間の双方向メッセージングを実装する例

ある日、リーダーはメインページに iframe を埋め込み、親ページと子ページ間で双方向にメッセージを送信するという要件を提案しました。そこで私は解決策を提案しました: postMessage

知識理論の準備:

postMessage メソッドを使用すると、異なるソースからのスクリプトが制限された方法で非同期に通信できるようになり、クロステキストドキュメント、マルチウィンドウ、およびクロスドメインメッセージ配信を実現できます。

文法：

otherWindow.postMessage(メッセージ、targetOrigin、[転送]);

otherWindow: iframe の contentWindow、window.open の実行によって返されるウィンドウオブジェクト、または名前付きまたは数値でインデックス付けされた window.frames などの別のウィンドウへの参照。
メッセージ: 他のウィンドウに送信されるデータ。
targetOrigin: メッセージイベントを受信できるウィンドウを指定します。その値は、制限がないことを示す文字列 "*" または URI にすることができます。
transfer: は、メッセージとともに渡される Transferable オブジェクトの文字列です。これらのオブジェクトの所有権はメッセージの受信者に譲渡され、送信者は所有権を保持しなくなります。

postMessage メソッドが呼び出されると、すべてのページスクリプトが実行された後、MessageEvent メッセージがターゲットウィンドウに送信されます。MessageEvent メッセージには、注意する必要がある 4 つのプロパティがあります。

タイプ: メッセージのタイプを示します
データ: postMessageの最初のパラメータ
origin: postMessageメソッドを呼び出すウィンドウのソースを示します
ソース: postMessageメソッドを呼び出すウィンドウオブジェクトを記録します

操作手順は以下のとおりです。

1. 2ページを用意する

http://a.com/main.html メインページ
http://b.com/iframepage.html ネストされたページ

メイン.html

<!DOCTYPE html> 
<html>
<ヘッド>
<メタ文字セット="utf-8">
<title>iframe+postMessage クロスドメイン通信メインページ</title>
</head>
<本文>
    <h1>メインページ</h1>
    <iframe id="child" src="http://b.com/iframepage.html"></iframe>
    <div>
        <h2>メインページのメッセージ受信エリア</h2>
        <span id="メッセージ"></span>
    </div>
</本文> 
</html>

iframeページ.html

<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="utf-8">
<title>iframe+postMessage クロスドメイン通信サブページ</title>
</head>
<本文>
    <h2>サブページ</h2>
    <div>
        <h3>メッセージエリアを受信</h3>
        <span id="メッセージ"></span>
    </div>
</本文>
</html>

2. 親が子供にメッセージを送る

メイン.html

<スクリプト>
    window.onload = 関数(){
        document.getElementById('child')
         .contentWindow.postMessage("メインページメッセージ", 
                「http://b.com/iframepage.html」)
    }
</スクリプト>

知らせ：

メッセージはページが読み込まれた後に送信する必要があります。そうでない場合、iframe が読み込まれていないためエラーが報告されます。

'DOMWindow' で 'postMessage' を実行できませんでした

サブページがメッセージを受信:

iframeページ.html

<スクリプト>
    window.addEventListener('メッセージ',function(イベント){
        console.log(イベント);
        document.getElementById('message').innerHTML = "受信" 
            + event.origin + "メッセージ: " + event.data;
    }、 間違い）;
</スクリプト>

この時点で、ページが iframe のサブページに印刷されていることがわかります。

http://a.com からメッセージを受信しました: メインページメッセージ`

コンソールに MessageEvent オブジェクトが出力されます。

3. 子どもが親にメッセージを送る

子ページはメッセージを受信後、親ページに返信します。

iframeページ.html

<スクリプト>
    window.addEventListener('メッセージ',function(イベント){
        console.log(イベント);
        document.getElementById('message').innerHTML = "受信" 
            + event.origin + "メッセージ: " + event.data;
        top.postMessage("サブページメッセージを受信しました", 'http://a.com/main.html')
    }、 間違い）;
</スクリプト>

親ページはメッセージを受信し、次のように表示します。

window.addEventListener('メッセージ', 関数(イベント){
    document.getElementById('message').innerHTML = "受信" 
        + event.origin + "メッセージ: " + event.data;
}、 間違い）;

4. 完全なコード

メイン.html

<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="utf-8">
<title>iframe+postMessage クロスドメイン通信メインページ</title>
</head>
<本文>
    <h1>メインページ</h1>
    <iframe id="child" src="http://b.com/iframepage.html"></iframe>
    <div>
        <h2>メインページのメッセージ受信エリア</h2>
        <span id="メッセージ"></span>
    </div>
</本文> 
<スクリプト>
    window.onload = 関数(){
        document.getElementById('child')
         .contentWindow.postMessage("メインページメッセージ", 
            「http://b.com/iframepage.html」)
    }
    window.addEventListener('メッセージ', 関数(イベント){
        document.getElementById('message').innerHTML = "受信"
         + event.origin + "メッセージ: " + event.data;
    }、 間違い）;
</スクリプト>
</html>

iframeページ.html

<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="utf-8">
<title>iframe+postMessage クロスドメイン通信サブページ</title>
</head>
<本文>
    <h2>サブページ</h2>
    <div>
        <h3>メッセージエリアを受信</h3>
        <span id="メッセージ"></span>
    </div>
</本文>
<スクリプト>
    window.addEventListener('メッセージ',function(イベント){
        if(window.parent !== event.source){return}
        console.log(イベント);
        document.getElementById('message').innerHTML = "受信" 
            + event.origin + "メッセージ: " + event.data;
        top.postMessage("サブページメッセージを受信しました", 'http://a.com/main.html')
    }、 間違い）;
</スクリプト>
</html>

html親子ページiframe双方向メッセージングの実装例に関するこの記事はこれで終わりです。より関連性の高いhtml親子ページiframe双方向メッセージングコンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

<<: Web ページでの Unicode 文字の使用の概要 (&#、\u など)

>>: CSSはカラフルでスマートな影の効果を実現します