suchen

Heim  >  Artikel  >  Web-Frontend  >  H5 window.postMessage und domänenübergreifend

H5 window.postMessage und domänenübergreifend

php中世界最好的语言
php中世界最好的语言Original
2018-03-26 16:18:282154Durchsuche

Dieses Mal werde ich Ihnen H5 window.postMessage und domänenübergreifend vorstellen. Was sind die Vorsichtsmaßnahmen zu window.postMessage und domänenübergreifend? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Im vorherigen Artikel haben wir über die Same-Origin-Richtlinie des Browsers gesprochen, die verhindert, dass Seiten aus unterschiedlichen Domänen auf die Methoden und Attribute des anderen zugreifen, und die Lösungen zur Lösung des domänenübergreifenden Problems derselben erarbeitet -Origin-Richtlinie: Subdomain-Proxy, JSONP, CORS. In diesem Artikel wird HTML5 window.postMessage näher erläutert. Mit der postMessage-API kann eine domänenübergreifende Kommunikation zwischen Dokumenten auf sichere und kontrollierbare Weise erreicht werden. JavaScript-Code von Drittanbietern kann auch mit externen Dokumenten kommunizieren, die in Iframes geladen werden.

HTML5 window.postMessage API

HTML5 window.postMessage ist eine sichere, ereignisbasierte Messaging-API.

postMessageNachricht senden

Rufen Sie die postMessage-Methode im Quellfenster auf, in das die Nachricht gesendet werden muss, um die Nachricht zu senden.

Quellfenster

Das Quellfenster kann das globale Fensterobjekt oder der folgende Fenstertyp sein:

Dokument-Iframe im Fenster: 

var iframe = document.getElementById('my-iframe');
    var win = iframe.documentWindow;

Von JavaScript geöffnetes Popup-Fenster: 

var win = window.open();

Das übergeordnete Fenster des aktuellen Dokumentfensters: 

var win = window.parent;

Öffnen Sie das Fenster des aktuellen Dokuments: 

var win = window.opener();

Nachdem Sie das Quellfensterobjekt gefunden haben, können Sie die postMessage-API aufrufen, um eine Nachricht an das Zielfenster zu senden: 

``win.postMessage('Hello', 'ttp://jhssdemo.duapp.com/');"

Die Funktion postMessage empfängt zwei Parameter: Der erste ist die zu sendende Nachricht, der zweite ist die Quelle des Quellfensters.

Hinweis: Die Nachricht kann nur empfangen werden, wenn die Quelle des Zielfensters mit dem in der postMessage-Funktion übergebenen Quellparameterwert übereinstimmt.

postMessage-Nachricht empfangen

Um die zuvor vom Quellfenster über postMessage gesendete Nachricht zu empfangen, müssen Sie nur das Nachrichtenereignis im Zielfenster registrieren und das Ereignis binden Abhörfunktion. Nachrichten können in Funktionsparametern abgerufen werden. 

window.onload = function() {
        var text = document.getElementById('txt');  
        function receiveMsg(e) {
            console.log("Got a message!");
            console.log("nMessage: " + e.data);
            console.log("nOrigin: " + e.origin);
            // console.log("Source: " + e.source);
            text.innerHTML = "Got a message!<br>" +
                "Message: " + e.data +
                "<br>Origin: " + e.origin;
        }
        if (window.addEventListener) {
            //为窗口注册message事件，并绑定监听函数
            window.addEventListener('message', receiveMsg, false);
        }else {
            window.attachEvent('message', receiveMsg);
        }
    };

Die Funktion zum Abhören von Nachrichtenereignissen empfängt einen Parameter, eine Ereignisobjektinstanz, die drei Attribute aufweist:

  1. Daten Die spezifische gesendete Nachricht

  2. Ursprung Sende-Nachrichtenquelle

  3. Quelle Fensterobjektreferenz des Sende-Nachrichtenfensters

Beschreibung

  1. Sie können den zweiten Parameter der postMessage-Funktion auf * setzen, um die Überprüfung der Nachrichtenquelle beim Senden einer domänenübergreifenden Nachricht zu überspringen.

  2. postMessage kann nur String-Informationen senden.

Instanz

Quellfenster 

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Html5 postMessage</title>
        <style>
            #otherWin {
                width: 600px;
                height: 400px;
                background-color: #cccccc;
            }
        </style>
    </head>
    <body>
        <button id="btn">open</button>
        <button id="send">send</button>
         <!-- 通过 iframe 嵌入子页面(接收消息目标窗口) --> 
         <iframe src="http://jhssdemo.duapp.com/demo/h5_postmessage/win.html" 
                     id="otherWin"></iframe> 
         <br/><br/> 
         <input type="text" id="message"><input type="button" 
                 value="Send to child.com" id="sendMessage" /> 
        <script>
            window.onload = function() {
                var btn = document.getElementById('btn');
                var btn_send = document.getElementById('send');
                var sendBtn = document.getElementById('sendMessage');
                var win;
                btn.onclick = function() {
                    //通过window.open打开接收消息目标窗口
                    win = window.open('http://jhssdemo.duapp.com/demo/h5_postmessage/win.html', 'popUp');
                }
                btn_send.onclick = function() { 
                    // 通过 postMessage 向子窗口发送数据      
                    win.postMessage('Hello', 'http://jhssdemo.duapp.com/');
                }
                function sendIt(e){ 
                    // 通过 postMessage 向子窗口发送数据
                    document.getElementById("otherWin").contentWindow 
                    .postMessage( 
                        document.getElementById("message").value, 
                        "http://jhssdemo.duapp.com/"); 
                } 
                sendBtn.onclick = function(e) {
                    sendIt(e);
                };
            };
        </script>
    </body>
    </html>

Zielfenster win.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Html5 postMessage</title>
        <style>
            #txt {
                width: 500px;
                height: 300px;
                background-color: #cccccc;
            }
        </style>
    </head>
    <body>
        <h1>The New Window</h1>
        <p id="txt"></p>
        <script>        
            window.onload = function() {
                var text = document.getElementById('txt');  
                //监听函数，接收一个参数--Event事件对象
                function receiveMsg(e) {
                    console.log("Got a message!");
                    console.log("nMessage: " + e.data);
                    console.log("nOrigin: " + e.origin);
                    text.innerHTML = "Got a message!<br>" +
                        "Message: " + e.data +
                        "<br>Origin: " + e.origin;
                }
                if (window.addEventListener) {
                    //为window注册message事件并绑定监听函数
                    window.addEventListener('message', receiveMsg, false);
                }else {
                    window.attachEvent('message', receiveMsg);
                }
            };
        </script>
    </body>
    </html>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Ausführliche Erklärung zum Erhalten von Standortinformationen mit Phonegap

Detaillierte Erklärung zum Erstellen von Kontakten mit Phonegap

Das obige ist der detaillierte Inhalt vonH5 window.postMessage und domänenübergreifend. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php JavaScript html5 html 字符串 Event 对象 事件 phonegap
Stellungnahme：
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
Vorheriger Artikel：H5-Drag-and-Drop-API für Drag-and-Drop-SortierungNächster Artikel：H5-Drag-and-Drop-API für Drag-and-Drop-Sortierung

In Verbindung stehende Artikel

Mehr sehen