ホームページ > 記事 > ウェブフロントエンド > HTML5 での postMessage API の基本的な使用法
HTML5 での postMessage API の基本的な使用法
- 不言オリジナル
- 2018-06-09 17:34:181838ブラウズ
window.postMessage は、クロスドメインのデータ転送によく使用されます。以下では、HTML5 での postMessage API の基本的な使用方法のチュートリアルを紹介します。必要な方は参考にしてください。
window.postMessage について。 html5 の機能ですが、IE8 以降をサポートします。Web サイトが IE6 および IE7 をサポートする必要がない場合は、window.postMessage を使用できます。 window.postMessage については、多くの友人がクロスドメインをサポートしていると言いました。はい、window.postMessage はクライアントとクライアントの間で直接データを転送でき、ドメイン間でも同じドメイン内でも転送できます。
応用シナリオ
もちろん、この機能はさまざまな場所で使用できます。
ページがあり、そのページでユーザー情報を取得する場合は、クリックして別のページに入ります。デフォルトでは、ユーザー情報の一部を window.postMessage を通じてこのページに渡すことができます。 (もちろん、セキュリティなどを考慮する必要があります。)コード例
メッセージの送信:
//弹出一个新窗口
var domain = 'http://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を使用して送信前に遅延させます。 受け入れられたページ//监听消息反馈
window.addEventListener('message',function(event) {
if(event.origin !== 'http://haorooms.com') return; //这个判断一下是不是我这个域名跳转过来的
console.log('received response: ',event.data);
},false);は以下のとおりです
iframeを使用している場合、コードは次のように記述する必要があります:
//捕获iframe
var domain = 'http://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);データを受け入れる//响应事件
window.addEventListener('message',function(event) {
if(event.origin !== 'http://haorooms.com') return;
console.log('message received: ' + event.data,event);
event.source.postMessage('holla back youngin!',event.origin);
},false);上記のコードスニペットは次のとおりです。メッセージソースに情報をフィードバックするための確認メッセージが受信されました。以下はいくつかの重要なイベント属性です: source – メッセージ ソース、メッセージ送信ウィンドウ/iframe。 origin – データ ソースの検証に使用されるメッセージ ソースの URI (プロトコル、ドメイン名、ポートが含まれる場合があります)。
data – 送信者から受信者に送信されるデータ。
インスタンスを呼び出す
<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 ワーカーが達成したいことです。
2. compute.js の postMessage メソッドを呼び出して計算結果を返します
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中国語ウェブサイトへ！ 関連する推奨事項:
HTML5 の新しい 8 種類の INPUT 入力
HTML5 を使用して WebSQL データベースを操作する方法
以上がHTML5 での postMessage API の基本的な使用法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。