Maison > Article > développement back-end > Exemples de communication intra-domaine et inter-domaine entre l'enfant iframe et la page parent
Exemples de communication intra-domaine et inter-domaine entre l'enfant iframe et la page parent
- 一个新手original
- 2017-09-11 09:26:062560parcourir
La communication entre la sous-page iframe et la page parent a été étudiée en profondeur depuis longtemps. Je n'ai jamais utilisé ce contenu auparavant, donc je ne l'ai pas étudié Aujourd'hui, j'ai soudainement rencontré une question, alors je lui ai posé une question. essayez. Les utilisations de communication inter-domaines de Le code source de messager.js fourni par l'équipe Tencent est également très simple et mérite le détour. La démo officielle est très complète. Je donne juste un exemple simple ici.
Communication intra-domaine
Page parent
<!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>Page enfant
<!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>Communication inter-domaines
Pour IE8+ et un serveur de navigation moderne, la communication inter-domaines utilise principalement l'API postMessage fournie par html5 pour réaliser la communication inter-domaine. La fonction de postMessage est de permettre aux programmeurs d'envoyer des informations de données entre deux fenêtres/frames à travers des domaines. Fondamentalement, c'est comme AJAX inter-domaines, mais au lieu d'interagir entre le navigateur et le serveur, il communique entre deux clients.
Pour les navigateurs plus anciens, Messenger.js utilise la fonctionnalité selon laquelle l'objet navigateur est partagé entre la fenêtre parent et l'iframe. La fonction de rappel de message est enregistrée sur l'objet navigateur pour implémenter le transfert et le partage d'informations.
Un exemple très simple est donné ci-dessous :
Page parent
<!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">