ホームページ >ウェブフロントエンド >htmlチュートリアル >H5 の postMessage API の詳細なグラフィックとテキストの説明 詳細な紹介
H5 の postMessage API の詳細なグラフィックとテキストの説明 詳細な紹介
- php中世界最好的语言オリジナル
- 2017-12-02 14:45:053776ブラウズ
postMessage については、HTML5 の機能ですが、IE8 以降をサポートしています。Web サイトが IE6 および IE7 をサポートする必要がない場合は、window.postMessage を使用できます。ドメイン間または同じドメイン内で転送できます。
私は単純なアプリケーションシナリオを示しているだけです。もちろん、この機能はさまざまな場所で使用できます。
ページがあり、そのページでユーザー情報を取得する場合は、クリックして別のページに入ります。デフォルトでは、ユーザー情報の一部を window.postMessage を通じてこのページに渡すことができます。 (もちろん、セキュリティなどの側面を考慮する必要があります。)
コード例
メッセージの送信:
JavaScriptコードの内容をクリップボードにコピーします
//弹出一个新窗口
var domain = 'https://haorooms.com';
var myPopup = window.open(domain
+ '/windowPostMessageListener.html','myWindow');
//周期性的发送消息
setTimeout(function(){
//var message = '当前时间是 ' + (new Date().getTime());
var message = {name:"站点",sex:"男"}; //你在这里也可以传递一些数据，obj等
console.log('传递的数据是 ' + message);
myPopup.postMessage(message,domain);
},1000);遅延させるには、通常、タイマーsetTimeoutを使用して送信前に遅延させます。
承認されたページ
JavaScript コードはコンテンツをクリップボードにコピーします
//メッセージのフィードバックを聞く
window.addEventListener('message',function(event) {
if(event.origin !== 'https://haorooms.com') return; //这个判断一下是不是我这个域名跳转过来的
console.log('received response: ',event.data);
},false);以下に示すように、承認されたページはデータを取得します
iframe を使用する場合、コードは次のように記述する必要があります:
JavaScript コード コンテンツをクリップボードにコピー
//捕获iframe
var domain = 'https://haorooms.com';
var iframe = document.getElementById('myIFrame').contentWindow;
//发送消息
setTimeout(function(){
//var message = '当前时间是 ' + (new Date().getTime());
var message = {name:"站点",sex:"男"}; //你在这里也可以传递一些数据，obj等
console.log('传递的数据是: ' + message);
//send the message and target URI
iframe.postMessage(message,domain);
},1000);データを受け入れる
コンテンツをクリップボードにコピーする JavaScript コード
//响应事件
window.addEventListener('message',function(event) {
if(event.origin !== 'https://haorooms.com') return;
console.log('message received: ' + event.data,event);
event.source.postMessage('holla back youngin!',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('compute.js');
//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 サイトの他の関連記事へ!
関連書籍:
以上がH5 の postMessage API の詳細なグラフィックとテキストの説明 詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。