Lorsque nous codons, nous rencontrons souvent les situations inter-domaines suivantes :
1. Imbrication des iframes dans la page et messagerie avec les iframes
2. Transférer des messages entre pages et plusieurs pages
En réponse à ces problèmes inter-domaines gênants, HTML5 a spécialement lancé une nouvelle fonctionnalité postMessage (transmission de messages entre documents). Lorsque vous utilisez postMessage, vous devez transmettre deux paramètres, data et originUrl. Les données font référence au contenu qui doit être transmis, mais certains navigateurs ne peuvent gérer que les paramètres de chaîne, nous sérialisons donc généralement les données, c'est-à-dire JSON.stringify(), et originUrl fait référence à l'URL cible et à la fenêtre spécifiée.
Vous trouverez ci-dessous un exemple, je pense qu'il sera plus facile pour tout le monde de comprendre et d'écrire.
1. Iframe imbriqué dans la page
Page parent :
HTML :
<div id='parent'>bonjour mot postMessage</div><iframe src=http://127.0.0.1:8082/index2.html id='child'></iframe>
js :
window.onload=function(){ window.frames[0].postMessage('postMessage','http://127.0.0.1:8082/index2.html')} window.addEventListener('message',function(e) { console.log(e) document.getElementById('parent').style.color=e.data})Sous-page :
HTML :
<div id='button' onclick='changeColor();' style=color:white>Accepter les informations</div>
js :
window.addEventListener('message',function(e){ console.log(e) let color = document.getElementById('button').style.color window.parent.postMessage(color,'http://127.0.0.1 :8081/index.html')});function changeColor(){ let buttonColor = document.getElementById('button').style.color buttonColor='#f00' window.parent.postMessage(buttonColor,'http://127.0.0.1:8081/index.html')}La page parent transmet les messages à l'iframe via la méthode postMessage et la page enfant écoute la méthode message via window.addEventListener pour obtenir la valeur transmise par la page parent. Comme le montre la figure ci-dessous, data est la valeur transmise par la page parent.
Lorsque la page enfant transmet des messages à la page parent, elle transmet également le message via la méthode postMessage, au lieu de transmettre la valeur via window.parent.postMessage(data,url). La page parent écoute également l'événement de message lors de l'obtention de la valeur.
2. Transmettez des messages entre plusieurs pages
Page parent :
HTML :
<div id='parent' onclick=postMessage()>bonjour mot postMessage</div>
js :
let parent = document.getElementById('parent')function postMessage(){ let windowOpen=window.open('http://127.0.0.1:8082/index2.html','postMessage') setTimeout(function(){ windowOpen .postMessage('postMessageData','http://127.0.0.1:8082/index2.html') },1000) }Sous-page :
HTML :
<div id='button' onclick='changeColor();' style=color:#f00>Accepter les informations</div>
js :
window.addEventListener('message',function(e){ console.log(e) });La page parent envoie un message à la page enfant pour ouvrir une autre page via window.open, puis lui transmet la valeur. Il convient de noter que lorsque vous utilisez postMessage pour transférer des valeurs, vous devez utiliser setTimeout pour retarder la livraison du message, car le chargement de la sous-page n'est pas terminé en une seule fois, ce qui signifie que l'événement d'écoute de la sous-page n'a pas encore commencé et la valeur est transmise à ce moment-là. Elle ne peut pas être reçue.
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.