Heim > Artikel > Web-Frontend > Detaillierte Grafik- und Texterklärung der postMessage-API in H5. Detaillierte Einführung
Detaillierte Grafik- und Texterklärung der postMessage-API in H5. Detaillierte Einführung
- php中世界最好的语言Original
- 2017-12-02 14:45:053710Durchsuche
In Bezug auf postMessage handelt es sich zwar um eine HTML5-Funktion, sie unterstützt jedoch IE8+. Wenn Ihre Website IE6 und IE7 nicht unterstützen muss, können Sie window.postMessage verwenden. Es kann domänenübergreifend oder innerhalb derselben Domäne übertragen werden.
Ich gebe nur ein einfaches Anwendungsszenario an. Natürlich kann diese Funktion an vielen Stellen verwendet werden.
Wenn Sie eine Seite haben und einen Teil der Benutzerinformationen auf der Seite abrufen, klicken Sie, um eine andere Seite aufzurufen. Die anderen Seiten können die Benutzerinformationen standardmäßig nicht abrufen über window.postMessage auf dieser Seite. (Natürlich müssen Sie Sicherheit und andere Aspekte berücksichtigen.)
Codebeispiel
Nachricht senden:
JavaScript-Code Inhalt in Zwischenablage kopieren
//弹出一个新窗口
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);Zum Verzögern verwenden wir normalerweise den Timer setTimeout zum Verzögern und verwenden ihn dann.
Akzeptierte Seite
JavaScript-Code kopiert den Inhalt in die Zwischenablage
//Nachrichten-Feedback überwachen
window.addEventListener('message',function(event) {
if(event.origin !== 'https://haorooms.com') return; //这个判断一下是不是我这个域名跳转过来的
console.log('received response: ',event.data);
},false);Wie unten gezeigt, wird die akzeptierte Seite angezeigt die Daten
Wenn Sie einen Iframe verwenden, sollte der Code so geschrieben sein:
JavaScript-Code kopiert den Inhalt in die Zwischenablage
//捕获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);Akzeptiert Daten
JavaScript-Code Kopieren Sie den Inhalt in die Zwischenablage
//响应事件
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);Der obige Codeausschnitt dient dazu, Informationen an die Nachrichtenquelle zurückzumelden und zu bestätigen, dass die Nachricht empfangen wurde. Im Folgenden sind einige wichtige Ereignisattribute aufgeführt:
Quelle – Nachrichtenquelle, Nachrichtensendefenster/Iframe.
Ursprung – URI der Nachrichtenquelle (kann Protokoll, Domänennamen und Port enthalten), der zur Überprüfung der Datenquelle verwendet wird.
Daten – die vom Sender an den Empfänger gesendeten Daten.
Rufen Sie die Instanz auf
Erstellen Sie eine Worker-Instanz im Hauptthread und hören Sie sich das onmessage-Ereignis an
JavaScript-Code kopiert Inhalte in die Zwischenablage
<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>
In der Datei „compute.js“ des Clients wird die Summenoperation einfach mehrmals wiederholt und das Ergebnis schließlich über die postMessage-Methode an den Hauptthread zurückgegeben, mit dem Zweck, eine gewisse Zeit zu warten. Während dieser Zeit sollte der Hauptthread nicht blockiert sein. Benutzer können dieses Phänomen testen, indem sie den Browser ziehen, das Browserfenster vergrößern oder verkleinern usw. Das Ergebnis dieses nicht blockierenden Hauptthreads ist das, was Web Worker erreichen wollen.
Der Aufruf der postMessage-Methode in Compute.js gibt das Berechnungsergebnis zurück
JavaScript-Code kopiert den Inhalt in die Zwischenablage
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());Ich glaube, Sie haben es gelesen. Sie beherrschen die Methoden in diesen Fällen. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Verwandte Lektüre:
Schritte zum Implementieren von HTTP-Cookies mit Js
Schritte zum Implementieren einer gepunkteten Linie mit HTML-Rahmen
Was ist die allgemeine Syntax von AJAX
Das obige ist der detaillierte Inhalt vonDetaillierte Grafik- und Texterklärung der postMessage-API in H5. Detaillierte Einführung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!