Heim > Artikel > Backend-Entwicklung > Beispiele für die domäneninterne und domänenübergreifende Kommunikation zwischen untergeordneter und übergeordneter Iframe-Seite
Beispiele für die domäneninterne und domänenübergreifende Kommunikation zwischen untergeordneter und übergeordneter Iframe-Seite
- 一个新手Original
- 2017-09-11 09:26:062552Durchsuche
Die Kommunikation zwischen der Iframe-Unterseite und der übergeordneten Seite wurde lange Zeit gründlich untersucht. Ich habe diesen Inhalt noch nie zuvor verwendet, daher bin ich heute plötzlich auf eine Frage gestoßen, also habe ich sie beantwortet Probieren Sie es aus. Der vom Tencent-Team bereitgestellte Quellcode von Messenger.js ist ebenfalls sehr einfach und einen Blick wert. Hier gebe ich nur ein einfaches Beispiel.
Domäneninterne Kommunikation
Übergeordnete Seite
<!DOCTYPE html><html><head><title>iframe子页面与父页面通信(同域)</title><meta charset="utf-8"><script type="text/javascript">
function sayHello(){
alert("iframeCommunication1.html");
} function say(){
child1.window.sayHello();
child1.window.document.getElementById("button_c").value = "the call is complete";
}</script></head><body><h1>iframe子页面与父页面同域通信</h1>调用子页面child1.html中的sayHello()函数：<input type="button" id="button_p" name="hello" value="call" onclick="say()"><br><br><iframe src="child1.html" id="child1"></iframe></body></html>Untergeordnete Seite
<!DOCTYPE html><html><head><title>iframe子页面与父页面通信(同域)</title><meta charset="utf-8"><script type="text/javascript">
function sayHello(){
alert("child.html");
} function say(){
parent.sayHello();
parent.window.document.getElementById("button_p").value = "the call is complete";
}</script></head><body><p>调用父页面iframeCommunication1.html中的sayHello()函数：</p><input type="button" id="button_c" name="hello" value="call" onclick="say()"></body></html>Domänenübergreifende Kommunikation
Für IE8+ Bei modernen Browsing-Servern verwendet die domänenübergreifende Kommunikation hauptsächlich die von HTML5 bereitgestellte PostMessage-API, um eine domänenübergreifende Kommunikation zu erreichen. Die Funktion von postMessage besteht darin, Programmierern das Senden von Dateninformationen zwischen zwei Fenstern/Frames über Domänen hinweg zu ermöglichen. Im Grunde ist es wie domänenübergreifendes AJAX, aber anstatt zwischen dem Browser und dem Server zu interagieren, kommuniziert es zwischen zwei Clients.
Für ältere Browser verwendet Messenger.js die Funktion, dass das Navigatorobjekt zwischen dem übergeordneten Fenster und dem Iframe geteilt wird. Die Nachrichtenrückruffunktion wird im Navigatorobjekt registriert, um die Informationsübertragung und -freigabe zu implementieren.
Ein sehr einfaches Beispiel ist unten aufgeführt:
Übergeordnete Seite
<!DOCTYPE html><html><head><title>iframe子页面与父页面通信(跨域)</title><meta charset="utf-8"><script src="js/messenger.js"></script></head><body><h1>iframe子页面与父页面跨域通信</h1>向子页面child2.html发送信息：<input type="button" id="button_p" value="call" onclick="sendMessage('child2')"><br><br>获取信息：<pre id="output">