window.postMessage wird häufig für die domänenübergreifende Datenübertragung verwendet. Im Folgenden wird Ihnen die grundlegende Verwendung der postMessage API in HTML5. Freunde in Not können sich auf
Über postMessage
beziehen. Obwohl window.postMessage angeblich eine Funktion von HTML5 ist, unterstützt es IE8+ Wenn Sie IE6 und IE7 unterstützen müssen, können Sie window.postMessage verwenden. In Bezug auf window.postMessage sagten viele Freunde, dass es domänenübergreifend unterstützt. Ja, window.postMessage ist eine direkte Datenübertragung zwischen dem Client und der Domäne.
Anwendungsszenario
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
SicherheitSex usw. berücksichtigen.)
Codebeispiel
Nachricht senden:
1 2 3 4 5 6 7 8 9 10 11 12 13 | JavaScript Code复制内容到剪贴板
var domain = 'http:
var myPopup = window.open(domain
+ '/windowPostMessageListener.html','myWindow');
setTimeout( function (){
var message = {name: "站点" ,sex: "男" };
console.log('传递的数据是 ' + message);
myPopup.postMessage(message,domain);
},1000);
|
Nach dem Login kopieren
Zur Verzögerung verwenden wir normalerweise den Timer setTimeout, um vor dem Senden zu verzögern.
Akzeptierte Seiten
1 2 3 4 5 6 | JavaScript Code复制内容到剪贴板
window.addEventListener('message', function (event) {
if (event.origin !== 'http:
console.log('received response: ',event.data);
},false);
|
Nach dem Login kopieren
Akzeptieren Sie wie unten gezeigt die Seite, um die Daten abzurufen

Wenn Sie iframe verwenden, sollte der Code wie folgt geschrieben sein:
1 2 3 4 5 6 7 8 9 10 11 12 13 | JavaScript Code复制内容到剪贴板
var domain = 'http:
var iframe = document.getElementById('myIFrame').contentWindow;
setTimeout( function (){
var message = {name: "站点" ,sex: "男" };
console.log('传递的数据是: ' + message);
iframe.postMessage(message,domain);
},1000);
|
Nach dem Login kopieren
Daten akzeptieren
1 2 3 4 5 6 7 | JavaScript Code复制内容到剪贴板
window.addEventListener('message', function (event) {
if (event.origin !== 'http:
console.log('message received: ' + event.data,event);
event.source.postMessage('holla back youngin!',event.origin);
},false);
|
Nach dem Login kopieren
Das obige Code-Snippet dient dazu, Informationen an die Nachrichtenquelle zurückzumelden, um zu bestätigen, dass die Nachricht empfangen wurde. Im Folgenden sind einige wichtige Ereignis-
-Attribute 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.
Aufrufen der Instanz1. Erstellen Sie eine Worker-Instanz im Hauptthread und hören Sie sich das onmessage-Ereignis an
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | JavaScript Code复制内容到剪贴板
<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');
worker.onmessage= function (event) {
document.getElementById( "result" ).innerHTML +=
event.data+ "<br/>" ;
};
}
</script>
</head>
<body onload= "init()" >
<p id= "result" ></p>
</body>
</html>
|
Nach dem Login kopieren
In der Datei „compute.js“ des Clients wird die Summenoperation einfach mehrmals wiederholt und schließlich das Ergebnis zurückgegeben über die postMessage-Methode Der Zweck des Hauptthreads besteht darin, 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.
2. Rufen Sie die postMessage-Methode incomputer.js auf, um das Berechnungsergebnis zurückzugeben
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | JavaScript Code复制内容到剪贴板
var i=0;
function timedCount(){
for ( var j=0,sum=0;j<100;j++){
for ( var i=0;i<100000000;i++){
sum+=i;
}
}
postMessage(sum);
}
postMessage( "Before computing," + new Date ());
timedCount();
postMessage( "After computing," + new Date ());
|
Nach dem Login kopieren
Das obige ist der detaillierte Inhalt vonTeilen der grundlegenden Verwendung der PostMessage-API in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!