Beispiele für die domäneninterne und domänenübergreifende Kommunikation zwischen untergeordneter und übergeordneter Iframe-Seite-PHP-Tutorial-php.cn

Beispiele für die domäneninterne und domänenübergreifende Kommunikation zwischen untergeordneter und übergeordneter Iframe-Seite

一个新手

Freigeben： 2023-03-15 21:38:02

Original

2729 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

1	`<!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">`

Nach dem Login kopieren

Unterseite

<!DOCTYPE html><html><head><title>iframe子页面与父页面通信(跨域)</title><meta charset="utf-8"><script src="js/messenger.js"></script></head><body><h1>child2</h1>向父页面iframeCommunication2.html发送信息：<br><input type="button" id="button_p" value="call" onclick="sendMessage('parent')"><br><br>获取信息：<pre id="output">

Nach dem Login kopieren

Referenz

[1] js Die untergeordnete Iframe-Seite kommuniziert mit der übergeordneten Seite
[2] Universelle Lösung für die domänenübergreifende Iframe-Kommunikation – Teil 2 (Ultimative Lösung) |

Das obige ist der detaillierte Inhalt vonBeispiele für die domäneninterne und domänenübergreifende Kommunikation zwischen untergeordneter und übergeordneter Iframe-Seite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!