Utilisation de postMessage en HTML5 pour transférer des données entre deux pages Web

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 l'attribut contentWindow de l'iframe, pas de l'objet nœud.

Fin de réception des données

Ce que nous voulons 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 renvoie 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, la fenêtre/iframe d'envoi du message.
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 – 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.

Utilisez 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 compliquée. Danger ; vous êtes responsable de la sécurité de votre candidature. window.postMessage est comme la technologie PHP par rapport à la technologie JavaScript. window.postMessage c'est cool, n'est-ce pas ?

Ce qui précède est le contenu de l'utilisation de postMessage pour transférer des données entre deux pages Web en HTML5. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn). !