In diesem Artikel wird die detaillierte Erklärung von HTML5 PostMessage zur Lösung des Problems der domänenübergreifenden Kommunikation vorgestellt und mit allen geteilt. Die Details lauten wie folgt:
Darstellungen
Postmessage-Analyse HTML5 bietet einen neuen Mechanismus PostMessage, um eine sichere Cross-Origin-Kommunikation zu erreichen Syntax otherWindow.postMessage(message, targetOrigin, [transfer]);
otherWindow: Ein Verweis auf andere Fenster, z. B. die contentWindow-Eigenschaft von IFRAME, das von window.open zurückgegebene Fensterobjekt: Daten, die an andere Fenster gesendet werden sollen. targetOrigin: Geben Sie an, welche Fenster Nachrichtenereignisse über die origin-Eigenschaft von empfangen können Der Wert des Fensters kann das Zeichen * (für unbegrenzt) oder eine URL-Übertragung sein: ist eine Zeichenfolge übertragbarer Objekte, die gleichzeitig mit der Nachricht übergeben wird. Der Besitz dieser Objekte wird an den Empfänger der Nachricht übertragen. Nach dem Senden bleibt der Besitz nicht mehr erhalten. element.addEventListener(event,fn,useCaption); Das Ereignis mit drei Parametern, z. B. die Callback-Funktion useCaption, wird verwendet, um zu beschreiben, ob es sprudelt oder erfasst. Der Standardwert ist false, was eine Blasenabgabe bedeutet. Wenn der Wert wahr ist, wird er erfasst und übergeben. Implementierungsmethode
Hauptschnittstelle 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 -Kompatibler Inhalt=ie=edge> <title>Domänenübergreifender Datenzugriff</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;> Ich bin die Hauptschnittstelle und warte auf den Empfang der Lieferung von iframe</div> <div style=margin:100px;> iframe < iframe src= http://localhost:3000/iframe.html width=800px height=300px ></iframe> </div></body></html>Iframe-Schnittstelle
<!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 -Kompatibler Inhalt=ie=edge> <title>Dokument</title> <style type=text/css> html,body{ height:100%; } </style></head> <body style=height:100%;> <div id=frame style=height:200px width:200px;background-color:rgb(204, 204, 0) onclick=changeColor( )> Klicken, um die Farbe zu ändern</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=color); window.parent.postMessage(color,'*'); } </script> </body></html>Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich sein wird. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.