HTML5 の新しいメカニズム: postMessage は安全なクロスドメイン通信を実装します (コード)-H5 チュートリアル-php.cn

HTML5 の新しいメカニズム: postMessage は安全なクロスドメイン通信を実装します (コード)

不言

リリース： 2018-08-17 14:36:12

オリジナル

2054 人が閲覧しました

この記事の内容は、postMessage による安全なクロスドメイン通信の実装に関するものです。必要な方は参考にしていただければ幸いです。

レンダリング

HTML5 の新しいメカニズム: postMessage は安全なクロスドメイン通信を実装します (コード) ポストメッセージ分析

otherWindow.postMessage(message, targetOrigin, [transfer]); IFRAME の contentWindow 属性などの参照が実行されます。
window.open によって返されるウィンドウオブジェクト: 他のウィンドウに送信されるデータ targetOrigin:
どのウィンドウがメッセージを受信できるかを指定します。値は文字「*」 (無制限を示す) または URL です。 transfer:
はメッセージと同時に渡される Transferable オブジェクトの文字列であり、これらのオブジェクトの所有権は受信者に転送されます。メッセージ、および送信後に保持されなくなります。バブリングまたはキャプチャ。デフォルト値は false で、バブル配信を意味します。値が true の場合、その値はキャプチャされて渡されます。

実装方法

メインインターフェースmain.html

nbsp;html>
 
 
  <meta>
  <meta>
  <meta>
  <title>跨域数据访问</title>
  <script>
         window.addEventListener(&#39;message&#39;,function(e){
           console.log("e--->",e);
           const data = e.data;
           document.getElementById(&#39;main1&#39;).style.backgroundColor=e.data;
         },false)
 
  </script>
 
 
  <p>
     我是主界面,等待接收iframe的传递
  </p>
  <p>
     iframe
     <iframe></iframe>
  </p>

ログイン後にコピー

iframeインターフェース

nbsp;html>
 
 
  <meta>
  <meta>
  <meta>
  <title>Document</title>
    <style>
           html,body{
               height:100%;
               margin:0px;
           }
    </style>
 
   
        <p>
           点击改变颜色
        </p>
        <script>
             function changeColor(){
               var frame = document.getElementById(&#39;frame&#39;);
               var color=frame.style.backgroundColor;
               if(color==&#39;rgb(204, 102, 0)&#39;){
                   color=&#39;rgb(204, 204, 0)&#39;;
               }else{
                   color=&#39;rgb(204,102,0)&#39;;
               }
                console.log("frame===>",frame);
                console.log("color",color);
               frame.style.backgroundColor=color;
               window.parent.postMessage(color,&#39;*&#39;);
             }
        </script>
   