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

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

php中世界最好的语言

Dec 02, 2017 pm 02:45 PM

apihtml5postmessage

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 サイトの他の関連記事へ!

関連書籍:

Js を使用して HTTP Cookie を実装する方法

html 点線の境界線の実装手順

AJAX の一般的な構文とは何ですか

以上がH5 の postMessage API の詳細なグラフィックとテキストの説明詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。