Heim > Web-Frontend > H5-Tutorial > Neuer HTML5-Mechanismus: postMessage implementiert sichere domänenübergreifende Kommunikation (Code)

Neuer HTML5-Mechanismus: postMessage implementiert sichere domänenübergreifende Kommunikation (Code)

不言
Freigeben: 2018-08-17 14:36:12
Original
1972 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit dem neuen Mechanismus von HTML5: PostMessage realisiert eine sichere domänenübergreifende Kommunikation (Code). Ich hoffe, dass er für Sie hilfreich ist.

Rendering

Neuer HTML5-Mechanismus: postMessage implementiert sichere domänenübergreifende Kommunikation (Code)

Postmessage-Analyse

  • HTML5 bietet einen neuen Mechanismus für die PostMessage-Implementierung Sichere ursprungsübergreifende Kommunikation. Syntax
    otherWindow.postMessage(message, targetOrigin, [transfer]); .Fensterobjekt öffnen. Nachricht: Daten, die an andere Fenster gesendet werden sollen:
    Verwenden Sie das Ursprungsattribut des Fensters, um anzugeben, welche Fenster Nachrichtenereignisse empfangen können Eine URL-Übertragung:
    ist eine Zeichenfolge übertragbarer Objekte, die gleichzeitig mit der Nachricht übermittelt wird. Das Eigentum an diesen Objekten wird auf den Empfänger der Nachricht übertragen und das Eigentum bleibt nach dem Senden nicht mehr erhalten >

    element.addEventListener(event,fn,useCaption); Drei Parameter-Ereignisereignisse wie
  • Klicken Sie mit der Maus, geben Sie die Maus ein und lassen Sie die Rückruffunktion 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

nbsp;html>


  <meta>
  <meta>
  <meta>
  <title>跨域数据访问</title>
  <script>
         window.addEventListener(&#39;message&#39;,function(e){
           console.log("e--->",e);
           const data = e.data;
           document.getElementById(&#39;main1&#39;).style.backgroundColor=e.data;
         },false)

  </script>


  <p>
     我是主界面,等待接收iframe的传递
  </p>
  <p>
     iframe
     <iframe></iframe>
  </p>

Nach dem Login kopieren

iframe-Schnittstelle

nbsp;html>


  <meta>
  <meta>
  <meta>
  <title>Document</title>
    <style>
           html,body{
               height:100%;
               margin:0px;
           }
    </style>

  
        <p>
           点击改变颜色
        </p>
        <script>
             function changeColor(){
               var frame = document.getElementById(&#39;frame&#39;);
               var color=frame.style.backgroundColor;
               if(color==&#39;rgb(204, 102, 0)&#39;){
                   color=&#39;rgb(204, 204, 0)&#39;;
               }else{
                   color=&#39;rgb(204,102,0)&#39;;
               }
                console.log("frame===>",frame);
                console.log("color",color);
               frame.style.backgroundColor=color;
               window.parent.postMessage(color,&#39;*&#39;);
             }
        </script>
  
Nach dem Login kopieren
Verwandte Empfehlungen:

postMessage behandelt iframe-domänenübergreifende Probleme_html/css_WEB-ITnose


So verwenden Sie postMessage in H5, um Daten zwischen zwei Webseiten zu übertragen

Das obige ist der detaillierte Inhalt vonNeuer HTML5-Mechanismus: postMessage implementiert sichere domänenübergreifende Kommunikation (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage