H5 の postMessage API の詳細なグラフィックとテキストの説明詳細な紹介-htmlチュートリアル-php.cn

H5 の postMessage API の詳細なグラフィックとテキストの説明詳細な紹介

php中世界最好的语言

リリース： 2017-12-02 14:45:05

オリジナル

3767 人が閲覧しました

postMessage については、HTML5 の機能ですが、IE8 以降をサポートしています。Web サイトが IE6 および IE7 をサポートする必要がない場合は、window.postMessage を使用できます。ドメイン間または同じドメイン内で転送できます。

私は単純なアプリケーションシナリオを示しているだけです。もちろん、この機能はさまざまな場所で使用できます。

ページがあり、そのページでユーザー情報を取得する場合は、クリックして別のページに入ります。デフォルトでは、ユーザー情報の一部を window.postMessage を通じてこのページに渡すことができます。 (もちろん、セキュリティなどの側面を考慮する必要があります。)

コード例

メッセージの送信:

JavaScriptコードの内容をクリップボードにコピーします

//弹出一个新窗口   
var domain = &#39;https://haorooms.com&#39;;   
var myPopup = window.open(domain    
            + &#39;/windowPostMessageListener.html&#39;,&#39;myWindow&#39;);   
  
//周期性的发送消息   
setTimeout(function(){   
    //var message = &#39;当前时间是 &#39; + (new Date().getTime());    
        var message = {name:"站点",sex:"男"}; //你在这里也可以传递一些数据，obj等   
    console.log(&#39;传递的数据是  &#39; + message);   
    myPopup.postMessage(message,domain);   
},1000);

ログイン後にコピー

遅延させるには、通常、タイマーsetTimeoutを使用して送信前に遅延させます。

承認されたページ

JavaScript コードはコンテンツをクリップボードにコピーします

//メッセージのフィードバックを聞く

window.addEventListener(&#39;message&#39;,function(event) {   
    if(event.origin !== &#39;https://haorooms.com&#39;) return; //这个判断一下是不是我这个域名跳转过来的   
    console.log(&#39;received response:  &#39;,event.data);   
},false);

ログイン後にコピー

以下に示すように、承認されたページはデータを取得します

iframe を使用する場合、コードは次のように記述する必要があります:

JavaScript コードコンテンツをクリップボードにコピー

//捕获iframe   
var domain = &#39;https://haorooms.com&#39;;   
var iframe = document.getElementById(&#39;myIFrame&#39;).contentWindow;   
  
//发送消息   
setTimeout(function(){   
    //var message = &#39;当前时间是 &#39; + (new Date().getTime());    
        var message = {name:"站点",sex:"男"}; //你在这里也可以传递一些数据，obj等   
    console.log(&#39;传递的数据是:  &#39; + message);   
        //send the message and target URI   
    iframe.postMessage(message,domain);    
},1000);

ログイン後にコピー

データを受け入れる

コンテンツをクリップボードにコピーする JavaScript コード

//响应事件   
window.addEventListener(&#39;message&#39;,function(event) {   
    if(event.origin !== &#39;https://haorooms.com&#39;) return;   
    console.log(&#39;message received:  &#39; + event.data,event);   
    event.source.postMessage(&#39;holla back youngin!&#39;,event.origin);   
},false);

ログイン後にコピー

上記のコードスニペットは、メッセージソースに情報をフィードバックし、メッセージが受信されたことを確認します。以下はいくつかの重要なイベント属性です:

source – メッセージソース、メッセージ送信ウィンドウ/iframe。
origin – データソースの検証に使用されるメッセージソースの URI (プロトコル、ドメイン名、ポートが含まれる場合があります)。
data – 送信者から受信者に送信されるデータ。

インスタンスを呼び出す
メインスレッドでWorkerインスタンスを作成し、onmessageイベントをリッスンする

JavaScriptコードがコンテンツをクリップボードにコピーする

<html>    
<head>    
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">    
<title>Test Web worker</title>    
<script type="text/JavaScript">    
 function init(){    
  var worker = new Worker(&#39;compute.js&#39;);    
  //event 参数中有 data 属性，就是子线程中返回的结果数据   
  worker.onmessage= function (event) {    
   // 把子线程返回的结果添加到 p 上   
   document.getElementById("result").innerHTML +=    
      event.data+"<br/>";    
  };    
 }    
</script>    
</head>    
<body onload="init()">    
<p id="result"></p>    
</body>    
</html>

ログイン後にコピー

クライアントのcompute.jsでは、次の単純な繰り返しですsum 操作を複数回実行し、最後に結果が postMessage メソッドを通じてメインスレッドに返されます。その目的は、一定期間待機することです。この期間中、メインスレッドがブロックされることはありません。ユーザーはブラウザをドラッグしたり、ブラウザウィンドウを拡大または縮小したりして、この現象をテストできます。このノンブロッキングメインスレッドの結果が、Web ワーカーが達成したいことです。

Compute.js は postMessage メソッドを呼び出して計算結果を返します

JavaScript コードはコンテンツをクリップボードにコピーします

var i=0;    
function timedCount(){    
 for(var j=0,sum=0;j<100;j++){    
  for(var i=0;i<100000000;i++){    
   sum+=i;    
  }    
 }    
 // 调用 postMessage 向主线程发送消息   
 postMessage(sum);    
}    
  
postMessage("Before computing,"+new Date());    
timedCount();    
postMessage("After computing,"+new Date());

ログイン後にコピー

これらの事例を読んだ後は、このメソッドを習得したと思います。さらに興味深い情報については、注目してください。 php 中国語 Web サイトの他の関連記事へ!