Grundlegende Verwendung der PostMessage-API in HTML5-HTML-Tutorial-php.cn

Grundlegende Verwendung der PostMessage-API in HTML5

不言

Freigeben： 2018-06-09 17:34:18

Original

1886 Leute haben es durchsucht

window.postMessage wird häufig für die domänenübergreifende Datenübertragung verwendet. Im Folgenden wird das grundlegende Tutorial zur Verwendung der postMessage-API in HTML5 vorgestellt.

Über postMessage

Obwohl window.postMessage angeblich eine Funktion von HTML5 ist, unterstützt es IE8+. Wenn Ihre Website IE6 und IE7 nicht unterstützen muss, 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 Sicherheit und andere Aspekte berücksichtigen.)

Codebeispiel

Nachricht senden:

//弹出一个新窗口   
var domain = &#39;http://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

Zu verzögern verwenden wir normalerweise Timing Die setTimeout-Verzögerung wird erneut verwendet.

Die akzeptierte Seite

//监听消息反馈   
window.addEventListener(&#39;message&#39;,function(event) {   
    if(event.origin !== &#39;http://haorooms.com&#39;) return; //这个判断一下是不是我这个域名跳转过来的   
    console.log(&#39;received response:  &#39;,event.data);   
},false);

Nach dem Login kopieren

Wie unten gezeigt, erhält die akzeptierte Seite die Daten

2016520115816771.png (507×161)

Wenn iframe verwendet wird, wird die Der Code sollte wie folgt geschrieben werden:

//捕获iframe   
var domain = &#39;http://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

Daten akzeptieren

//响应事件   
window.addEventListener(&#39;message&#39;,function(event) {   
    if(event.origin !== &#39;http://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

Das obige Codefragment 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.

Instanz aufrufen
1. Erstellen Sie eine Worker-Instanz im Hauptthread und hören Sie sich das onmessage-Ereignis an

<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 einfach wiederholen Die Schritte Die Summenoperation wird einmal ausgeführt und schließlich wird das Ergebnis über die postMessage-Methode an den Hauptthread zurückgegeben. Der Zweck 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

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

Das Obige ist der gesamte Inhalt dieses Artikels zum Lernen aller. Bitte achten Sie auf den Inhalt der chinesischen PHP-Website!

Verwandte Empfehlungen:

Neue acht Arten von INPUT-Eingaben für HTML5

So verwenden Sie HTML5 für den Betrieb einer WebSQL-Datenbank

Das obige ist der detaillierte Inhalt vonGrundlegende Verwendung der PostMessage-API in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!