Teilen der grundlegenden Verwendung der PostMessage-API in HTML5-H5-Tutorial-php.cn

Teilen der grundlegenden Verwendung der PostMessage-API in HTML5

黄舟

Freigeben： 2017-03-15 16:26:07

Original

2248 Leute haben es durchsucht

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:

JavaScript Code复制内容到剪贴板
//弹出一个新窗口   
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

Zur Verzögerung verwenden wir normalerweise den Timer setTimeout, um vor dem Senden zu verzögern.

Akzeptierte Seiten

JavaScript Code复制内容到剪贴板
//监听消息反馈   
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

Akzeptieren Sie wie unten gezeigt die Seite, um die Daten abzurufen

Teilen der grundlegenden Verwendung der PostMessage-API in HTML5

Wenn Sie iframe verwenden, sollte der Code wie folgt geschrieben sein:

JavaScript Code复制内容到剪贴板
//捕获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

JavaScript Code复制内容到剪贴板
//响应事件   
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 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

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

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 向主线程发送消息   
 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!