Comment utiliser postMessage pour transférer des données entre deux pages Web dans H5

Cette fois, je vais vous montrer comment utiliser postMessage dans H5 pour transférer des données entre deux pages Web. Comment utiliser postMessage dans H5 pour transférer des données entre deux pages Web ? PostMessage Quelles sont les précautions pour transférer des données entre deux pages web Voici un cas pratique, jetons un oeil.

On estime que peu de gens savent qu'il existe une API window.postMessage dans l'API HTML5. La fonction de window.postMessage est de permettre aux programmeurs d'envoyer des informations de données entre deux fenêtres/frames à travers des domaines. Fondamentalement, c'est comme AJAX inter-domaines, mais au lieu d'interagir entre le navigateur et le serveur, il communique entre deux clients. Jetons un coup d'œil au fonctionnement de window.postMessage. Tous les navigateurs, à l'exception d'IE6 et IE7, prennent en charge cette fonctionnalité.

Fin de l'envoi des données

La première chose que nous devons faire est de créer l'initiateur de la communication, qui est la source de données "source". En tant qu'initiateur, nous pouvons ouvrir une nouvelle fenêtre ou créer une iframe et envoyer des données à la nouvelle fenêtre pour plus de simplicité, nous l'envoyons toutes les 6 secondes, puis créons un écouteur de message pour écouter les informations de retour de la fenêtre cible. .

//弹出一个新窗口   
var domain = 'http://scriptandstyle.com';   
var myPopup = window.open(domain    
            + '/windowPostMessageListener.html','myWindow');   
  
//周期性的发送消息   
setInterval(function(){   
 var message = 'Hello!  The time is: ' + (new Date().getTime());   
 console.log('blog.local:  sending message:  ' + message);   
        //send the message and target URI   
 myPopup.postMessage(message,domain);   
},6000);   
  
//监听消息反馈   
window.addEventListener('message',function(event) {   
 if(event.origin !== 'http://scriptandstyle.com') return;   
 console.log('received response:  ',event.data);   
},false);

Ici, j'ai utilisé window.addEventListener, mais cela ne fonctionne pas dans IE car IE utilise window.attachEvent. Si vous ne souhaitez pas déterminer le type de navigateur, vous pouvez utiliser certaines bibliothèques d'outils, telles que jQuery ou Dojo.

En supposant que votre fenêtre s'ouvre normalement, nous envoyons un message - vous devez spécifier l'URI (si nécessaire, vous devez spécifier le protocole, l'hôte, le numéro de port, etc.), et le destinataire du message doit être à cet URI spécifié. Si la fenêtre cible est remplacée, le message ne sera pas envoyé.

Nous avons également créé un écouteur d'événement pour recevoir des informations de retour. Une chose est extrêmement importante, vous devez vérifier l'URI de la source du message ! Vous ne pouvez traiter les messages de la partie cible que s'ils sont légitimes.

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

//捕获iframe   
var domain = 'http://scriptandstyle.com';   
var iframe = document.getElementById('myIFrame').contentWindow;   
  
//发送消息   
setInterval(function(){   
 var message = 'Hello!  The time is: ' + (new Date().getTime());   
 console.log('blog.local:  sending message:  ' + message);   
        //send the message and target URI   
 iframe.postMessage(message,domain);    
},6000);

Assurez-vous que vous utilisez la propriété contentWindow de l'iframe, pas l'objet nœud.

Fin de réception des données

Ce que nous souhaitons développer ensuite, c'est la page de fin de réception des données. Il y a un écouteur d'événement dans la fenêtre du récepteur qui écoute l'événement « message ». De même, vous devez également vérifier l'adresse de la source du message. Les messages peuvent provenir de n'importe quelle adresse. Assurez-vous que le message en cours de traitement provient d'une adresse fiable.

//响应事件   
window.addEventListener('message',function(event) {   
 if(event.origin !== 'http://davidwalsh.name') return;   
 console.log('message received:  ' + event.data,event);   
 event.source.postMessage('holla back youngin!',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.

Ces trois attributs sont des données qui doivent être utilisées dans la transmission des messages.

Utiliser window.postMessage

Comme beaucoup d'autres technologies web, si vous ne vérifiez pas la validité de la source de données, l'utilisation de cette technologie deviendra très dangereuse. La sécurité de votre application vous impose d'être responsable ; pour ça. window.postMessage est comme PHP par rapport à la technologie JavaScript. window.postMessage c'est cool, n'est-ce pas ?

Je pense que vous maîtrisez les méthodes après avoir lu 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 détaillées pour créer une plateforme de gestion de livres à l'aide de vue.js

Comment compter la somme d'un tableau dans bootstrap Le nombre de

Comment utiliser JS pour désactiver et activer les boutons

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!