Maison >interface Web >Tutoriel H5 >Partager l'utilisation de base de l'API postMessage en HTML5

Partager l'utilisation de base de l'API postMessage en HTML5

黄舟original: 2017-03-15 16:26:072247parcourir

window.postMessage est souvent utilisé par des personnes pour le transfert de données entre domaines. Ce qui suit vous présentera le tutoriel d'utilisation de base de postMessage API en HTML5. Les amis dans le besoin peuvent se référer à

À propos de postMessage

Bien que window.postMessage soit censé être une fonction de html5, il prend en charge IE8. devez prendre en charge IE6 et IE7, vous pouvez alors utiliser window.postMessage. Concernant window.postMessage, de nombreux amis ont dit qu'il pouvait prendre en charge plusieurs domaines. Oui, window.postMessage est un transfert de données direct entre le client et le client. Il peut être transféré entre domaines ou dans le même domaine.

Scénario d'application

Je donne juste un scénario d'application simple. Bien sûr, 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éle sexe, etc.)

Exemple de code

Envoyer un message :

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

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

Pages acceptées

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

Comme indiqué ci-dessous, acceptez la page pour obtenir les données

Partager l'utilisation de base de l'API postMessage en HTML5

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

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

Accepter les données

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

L'extrait de code ci-dessus sert à renvoyer des informations à la source du message pour 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.

Appel de l'instance1. Créez une instance Worker dans le thread principal et écoutez l'événement onmessage

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>

Dans le fichier computing.js du client, il répète simplement l'opération de somme plusieurs fois et renvoie finalement le résultat via la méthode postMessage Vers le thread principal, le but est 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.

2. Appelez la méthode postMessage dans calculate.js pour renvoyer le résultat du calcul

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

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée du plan d'amélioration de la compatibilité du navigateur pour la balise vidéo HTML5Article suivant：Explication détaillée du plan d'amélioration de la compatibilité du navigateur pour la balise vidéo HTML5

Articles Liés

Voir plus