BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

iframe+postMessageを使ったクロスドメインコミュニケーションのサンプルコード

2022-01-27 07:55:41

通常、異なる2つのページのスクリプトの場合、それらを実行するページが同じプロトコル（通常はhttps）、ポート番号（httpsのデフォルト値は443）、ホストに位置している場合のみ、2つのスクリプトは互いに通信することが可能です。実際のプロジェクト開発では、親ページに別の子ページを埋め込んだり、親ページに別のページをポップアップさせるために iframe がよく使われますが、同一ソースポリシーの制限により、親子ページ間のスクリプトは通信を実現できず、親子ページ間のクロスドメインメッセージングは postMessage というメソッドを用いて実現されています。

構文 

otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow: iframeのcontentWindowプロパティや、window.openの実行により返されるウィンドウオブジェクトなど、他のページへの参照。

message:他のページに渡すデータ（データオブジェクトは構造化クローンアルゴリズムにより、それ自体をシリアライズする必要がなく、制限なく安全にターゲットウィンドウに渡すことができる）。

targetOrigin: ウィンドウの origin プロパティでメッセージイベントを受け取るウィンドウを、文字列 "*" （無制限の場合）または Url で指定します。メッセージ情報。メッセージの漏洩を防ぐため、通常は特定のurlを指定します。

transfer: オプションのパラメータです。

使用方法

1. 親ページです。(urlはhttp://www.b.com/main.html). 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>parent</title>
</head>
<body>
    <iframe id="child" src="http://www.a.com/iframepage.html"></iframe>
    <script>
        window.onload = function(){
            document.getElementById("child").contentWindow.postMessage("Message passed from main page","http://www.a.com/iframepage.html& quot;)
        }
        window.addEventListener('message', function(event){ //parent gets the message passed by the child
            if(event.origin == "http://www.a.com"){
                //you can do some logic here
            }
        }, false)
    </script>
</body>
</html>

2. サブページ (url is http://www.a.com/iframepage.html) 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>subpages</title>
</head>
<body>
    <div> Here are the subpages</div>
    <script>
        window.addEventListener('message', function(event){
           if(event.origin == "http://www.b.com"){
                // you can do something here
                top.postMessage("Child page received message from parent page", 'http://www.b.com/main.html')//Child page passes message to parent page
           }
        }, false);
    </script>
</body>
</html>

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

type: メッセージの種類を表します。

data: postMessageの最初のパラメータです。

origin: postMessage メソッドウィンドウのソースを示します。

source: postMessage メソッドを呼び出したウィンドウのオブジェクトを記録します。

特記事項
1. Aページに埋め込まれたBページの読み込みが完了するまで、必ずpostMessageによるクロスドメイン通信を行う。
2. 他のオリジンからの攻撃を防ぐために、必ずオリジンの判定を行い、ターゲットウィンドウから外れたオリジンを削除すること

今回は以上です。皆様の学習のお役に立てれば幸いです。また、Scripting Houseを応援していただければ幸いです。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します