Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der Verwendung von Postnachrichten

Detaillierte Erläuterung der Verwendung von Postnachrichten

藏色散人Original: 2020-02-17 11:13:228459Durchsuche

Postmessage-Nutzung

Eine Zusammenfassung der Verwendung von PostMessage in HTML5

Jeder weiß, dass die Übertragung von Daten zwischen Webseiten mithilfe von Ajax-Anfragen erfolgen kann. Heute werde ich zusammenfassen, wie die PostMessage, die ich gelernt habe, seitenübergreifende Datenanfragen abschließt. Zunächst einmal ist postMessage eine neue Methode in HTML5 zur Lösung domänenübergreifender Probleme. Wie nutzt er es also? Hier werde ich einen Fall teilen.

Empfohlene verwandte Video-Tutorials: HTML-Video-Tutorial

Sehen Sie sich den folgenden Code an:

test.html

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
</head>
<body>
</body>
<script>
onmessage=function(e){
  e=e||event;
  document.write("my name is ",e.data);
   document.body.style.background = &#39;red&#39;;
};
</script>
</html>

1. html

<!DOCTYPE html>
<html>
<head>
<title>window.postMessage</title>
<meta charset="utf-8"/>
<h1>test接收区</h1>
</head>
<body>
 
</body>
<iframe id="f" src="http://localhost:8080/chajian/test.html"></iframe>
<script>
var f=document.getElementById("f");
//给框架网页发送消息，然后收到之后，会传送过来。
f.οnlοad=function(){
 setTimeout(function(){
  f.contentWindow.postMessage("谢霆锋","http://localhost:8080");
 },3000)
}
</script>
</html>

Zunächst einmal ist das Prinzip so. Lassen Sie mich meinen Fallcode als Beispiel nehmen.

1.html ist in ein Iframe-Webseiten-Framework eingebettet, in das Daten übertragen werden. Nachdem 1.html geladen wurde, sendet er sie aktiv an test.html Nicholas Tse und dann an test.html empfangen werden, enthält es eine Verarbeitungsfunktion zum Empfangen von Nachrichten. Nach dem Empfang der Nachricht wird sofort eine Zeichenfolge an die Webseite zurückgegeben und der Hintergrund wird dann in Rot geändert. Dadurch wird der Effekt einer Webseiteninteraktion erzielt. Leider wird dies vom bösen ie6.7 nicht unterstützt und die Kompatibilität ist nicht hoch.

Hinweis: Beim Schreiben von postMessage wird vor postMessage das Fensterobjekt geschrieben, mit dem Sie kommunizieren möchten (d. h. mit wem Sie kommunizieren möchten). Zu diesem Zeitpunkt sind die Berechtigungen von window.parent eingeschränkt Rufen Sie dazu das übergeordnete DOM-Element ab und melden Sie es nicht in derselben Domäne. Andernfalls meldet der Browser einen Fehler und weist Sie darauf hin, dass Sie keinen domänenübergreifenden Zugriff durchführen können. Schauen wir uns die in postMessage empfangenen Parameter an sind die Daten, die Sie an ein anderes Fenster übergeben möchten (aus Sicherheitsgründen kann nur der Zeichenfolgentyp übergeben werden). es kann an jedes Fenster übergeben werden.

Das Obige ist eine einseitige Interaktion und das Folgende ist eine zweiseitige Interaktion. Tatsächlich sind sie gleich, aber beide Seiten sind so geschrieben, dass sie auf Sendeereignisse warten.

test.html

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
</head>
<body>
<h1 class="header">page B</h1>
 
<input type="text" id="inp" value="我想你">
<button οnclick="send()">send</button>
</body>
 
 
<script>
window.addEventListener(&#39;message&#39;, function(ev) {
    // if (ev.source !== window.parent) {return;}
    var data = ev.data;
  document.write("my name is ",data);
   document.body.style.background = &#39;red&#39;;
}, false);
 
function send() {
    var data = document.querySelector(&#39;#inp&#39;).value;
    parent.postMessage(data, &#39;http://localhost:8080/&#39;); // 若父页面的域名和指定的不一致，则postMessage失败
    // parent.postMessage(data, &#39;*&#39;); // 触发父页面的message事件
}
</script>
</html>

1.html

<!DOCTYPE html>
<html>
<head>
<title>window.postMessage</title>
<meta charset="utf-8"/>
<h1>test接收区</h1>
</head>
<body>
 
 
<h1 class="header">page A</h1>
<div class="mb20">
    <textarea name="ta" id="data" cols="30" rows="5">hello world</textarea>
    <button style="font-size:20px;" οnclick="send()">post message</button>
</div>
<!-- 跨域的情况 -->
<iframe src="http://localhost:8080/chajian/test.html" id="child" style="display: block; border: 1px dashed #ccc; height: 300px;"></iframe>
 
<script>
function send() {
    var data = document.querySelector(&#39;#data&#39;).value;
 
    window.frames[0].postMessage(data, &#39;http://localhost:8080/&#39;); // 触发跨域子页面的messag事件
}
 
window.addEventListener(&#39;message&#39;, function(messageEvent) {
    var data = messageEvent.data; 
    console.info(&#39;message from child:&#39;, data);
    document.write("收到了数据： ",data);
    document.body.style.background = &#39;red&#39;;
}, false);
</script>
</body>
</html>

Ebenso ist 1.html die Hauptseite. Öffnen Sie HTML und Sie können interagieren.

Weitere Informationen zum Programmieren finden Sie auf dem Video-Tutorial-Kanal der chinesischen PHP-Website Einführung in die Programmierung!

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von Postnachrichten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：HTML implementiert das Hinzufügen von Symbolen zur Titelleiste von WebseitenNächster Artikel：HTML implementiert das Hinzufügen von Symbolen zur Titelleiste von Webseiten

In Verbindung stehende Artikel

Mehr sehen