Detaillierte Grafik- und Texterklärung der postMessage-API in H5. Detaillierte Einführung-HTML-Tutorial-php.cn

Detaillierte Grafik- und Texterklärung der postMessage-API in H5. Detaillierte Einführung

php中世界最好的语言

Freigeben： 2017-12-02 14:45:05

Original

3767 Leute haben es durchsucht

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 = &#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);

Nach dem Login kopieren

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(&#39;message&#39;,function(event) {   
    if(event.origin !== &#39;https://haorooms.com&#39;) return; //这个判断一下是不是我这个域名跳转过来的   
    console.log(&#39;received response:  &#39;,event.data);   
},false);

Nach dem Login kopieren

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 = &#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);

Nach dem Login kopieren

Akzeptiert Daten

JavaScript-Code Kopieren Sie den Inhalt in die Zwischenablage

//响应事件   
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);

Nach dem Login kopieren

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(&#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>

Nach dem Login kopieren

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());

Nach dem Login kopieren

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!