Cet article présente l'explication détaillée de html5 postMessage pour résoudre le problème de la communication inter-domaines et la partage avec tout le monde. Les détails sont les suivants :
rendus
L'analyse postmessage HTML5 fournit un nouveau mécanisme PostMessage pour obtenir une communication sécurisée entre origines. Syntaxe otherWindow.postMessage(message, targetOrigin, [transfer]);
otherWindow : une référence à d'autres fenêtres, comme la propriété contentWindow d'IFRAME, exécution, objet window renvoyé par window.open message : données à envoyer à d'autres fenêtres targetOrigin : Utilisez la propriété origin de la fenêtre pour spécifier quelles fenêtres peuvent. recevoir des événements de message, sa valeur peut être le caractère * (indiquant illimité) ou une URL de transfert : est une chaîne d'objets transférables passés en même temps que le message. La propriété de ces objets sera transférée au destinataire du message. Une fois envoyé, la propriété ne sera plus conservée. element.addEventListener(event,fn,useCaption); L'événement à trois paramètres tel que la fonction de rappel click mouseenter mouseleave useCaption est utilisé pour décrire s'il bouillonne ou capture. La valeur par défaut est false, ce qui signifie une livraison à bulles. Lorsque la valeur est vraie, elle est capturée et transmise. Méthode de mise en œuvre
Interface principale main.html
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>Accès aux données inter-domaines</title> <script type=text/javascript> window.addEventListener('message',function(e){ console.log(e--->,e); const data = e.data; document.getElementById('main1').style.backgroundColor=e.data; },false) </script></head><body> <div id=main1 style=width:200px;height:200px;margin:100px;border:solid 1px #000;> Je suis l'interface principale, en attente de recevoir la livraison de l'iframe</div> <div style=margin:100px;> iframe < iframe src= http://localhost:3000/iframe.html largeur=800px hauteur=300px ></iframe> </div></body></html>interface iframe
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>Document</title> <style type=text/css> html,body{ height:100% margin:0px; } </style></head> <body style=height:100%;> <div id=frame style=height:200px; width:200px;background-color:rgb(204, 204, 0) onclick=changeColor( )> Cliquez pour changer de couleur</div> <script type=text/javascript> function changeColor(){ var frame = document.getElementById('frame'); var color=frame.style.backgroundColor; if(color=='rgb(204, 102, 0)'){ color='rgb(204, 204, 0)' }else{ color='rgb(204,102,0) )'; } console.log(frame====>,frame); console.log(color,color); window.parent.postMessage(color,'*'); } </script> </body></html>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.