HTML5 window.postMessage und domänenübergreifende Tutorials
In diesem Artikel wird hauptsächlich die detaillierte Erklärung von HTML5 window.postMessage und Cross-Domain vorgestellt, die von großem praktischem Wert ist. Freunde in Not können darauf verweisen
Im vorherigen Artikel , wir haben über die Same-Origin-Richtlinie des Browsers gesprochen, die verhindert, dass Seiten aus verschiedenen Domänen auf die Methoden und Attribute der anderen zugreifen. Außerdem werden die vorgeschlagenen Lösungen zur Lösung des domänenübergreifenden Problems der Same-Origin-Richtlinie erläutert: Subdomain-Proxy, JSONP und 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.
postMessage sendet eine Nachricht
Rufen Sie die postMessage-Methode im Quellfenster auf, in das die Nachricht gesendet werden muss, um die Nachricht zu senden.
Quellfenster
Das Quellfenster kann ein globales Fensterobjekt oder die folgenden Fenstertypen sein:
iframe im Dokumentfenster:
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;
Öffnet 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/');"
postMessageDie Funktion 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:
Daten Senden Die spezifische Nachricht
Ursprung der sendenden Nachrichtenquelle
Quelle Das Fensterobjekt des sendenden Nachrichtenfensters Referenz
Hinweis
Sie können den zweiten Parameter der postMessage-Funktion auf * setzen, wodurch das Senden der Nachricht übersprungen wird Überprüfen Sie beim Senden domänenübergreifender Nachrichten die Quelle.
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>Rezension
Durch das Studium dieses Artikels habe ich gelernt, wie man die postMessage-API von HTML5 für die Kommunikation zwischen Fenstern verwendet, und habe auch gelernt, dass sie zum Erreichen übergreifender Ergebnisse verwendet werden kann. Domänenkommunikation; modernes Surfen Grundsätzlich unterstützen alle Browser postMessage, aber für einige alte Browser wie IE7 usw. können bestimmte Alternativen für die Datenkommunikation verwendet werden, wie z. B. window.name, urlquery Zeichen und Hash Fragmente usw.
【Verwandte Empfehlungen】
1. Besondere Empfehlung: Version „php Programmer Toolbox“ V0.1 herunterladen
2. Kostenloses h5-Online-Video-Tutorial
3. php.cn Original-HTML5-Video-Tutorial
Das obige ist der detaillierte Inhalt vonHTML5 window.postMessage und domänenübergreifende Tutorials. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1377
52
Tabellenrahmen in HTML
Sep 04, 2024 pm 04:49 PM
Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.
HTML-Rand links
Sep 04, 2024 pm 04:48 PM
Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.
Verschachtelte Tabelle in HTML
Sep 04, 2024 pm 04:49 PM
Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.
HTML-Tabellenlayout
Sep 04, 2024 pm 04:54 PM
Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.
HTML-Eingabeplatzhalter
Sep 04, 2024 pm 04:54 PM
Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.
HTML-geordnete Liste
Sep 04, 2024 pm 04:43 PM
Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele
Text in HTML verschieben
Sep 04, 2024 pm 04:45 PM
Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.
HTML-Onclick-Button
Sep 04, 2024 pm 04:49 PM
Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.
