Explication graphique et textuelle détaillée de l'API postMessage dans H5Introduction détaillée-tutoriel HTML-php.cn

Explication graphique et textuelle détaillée de l'API postMessage dans H5Introduction détaillée

php中世界最好的语言

Libérer： 2017-12-02 14:45:05

original

3767 Les gens l'ont consulté

Concernant postMessage, bien qu'il s'agisse d'une fonction HTML5, elle prend en charge IE8+. Si votre site Web n'a pas besoin de prendre en charge IE6 et IE7, vous pouvez utiliser window.postMessage. Il peut être transféré entre domaines ou au sein du même domaine.

Je donne juste un scénario d'application simple. Bien entendu, cette fonction peut être utilisée dans de nombreux endroits.

Si vous avez une page et obtenez une partie des informations utilisateur sur la page, cliquez pour accéder à une autre page. Les autres pages ne peuvent pas obtenir les informations utilisateur par défaut. Vous pouvez transmettre une partie des informations utilisateur à la page. via window.postMessage dans cette page. (Bien sûr, vous devez prendre en compte la sécurité et d'autres aspects.)

Exemple de code

Envoyer un message :

Le code JavaScript copie le contenu dans le presse-papiers

//弹出一个新窗口   
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);

Copier après la connexion

Pour retarder, nous utilisons généralement le timer setTimeout pour retarder puis l'utiliser.

Page acceptée

Le code JavaScript copie le contenu dans le presse-papiers

//Surveillance des commentaires sur les messages

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

Copier après la connexion

Comme indiqué ci-dessous, la page acceptée obtient les données

Si vous utilisez iframe, le code doit être écrit comme ceci :

Code JavaScript Copiez le contenu dans le presse-papiers

//捕获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);

Copier après la connexion

Accepter les données

Code JavaScript Copiez le contenu dans le presse-papiers

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

Copier après la connexion

L'extrait de code ci-dessus sert à renvoyer des informations à la source du message et à confirmer que le message a été reçu. Voici plusieurs attributs d'événement importants :

source – source du message, fenêtre d'envoi du message/iframe.
origine – URI de la source du message (peut inclure le protocole, le nom de domaine et le port), utilisé pour vérifier la source de données.
données – les données envoyées par l'expéditeur au destinataire.

Appelez l'instance
Créez une instance Worker dans le thread principal et écoutez l'événement onmessage

Le code JavaScript copie le contenu dans le presse-papiers

<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>

Copier après la connexion

Dans le calculate.js du client, il répète simplement l'opération de somme plusieurs fois et renvoie finalement le résultat au thread principal via la méthode postMessage, dans le but d'attendre un certain temps. Pendant cette période, le fil de discussion principal ne doit pas être bloqué. Les utilisateurs peuvent tester ce phénomène en faisant glisser le navigateur, en agrandissant ou en réduisant la fenêtre du navigateur, etc. Le résultat de ce fil principal non bloquant est ce que les Web Workers souhaitent réaliser.

L'appel de la méthode postMessage dans calculate.js renvoie le résultat du calcul

Le code JavaScript copie le contenu dans le presse-papiers

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

Copier après la connexion

Je pense que vous l'avez lu. Vous maîtrisez les méthodes dans ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture connexe :

Étapes pour implémenter les cookies HTTP à l'aide de Js

Étapes pour implémenter la ligne pointillée de la bordure HTML

Quelle est la syntaxe commune d'AJAX

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!