In diesem Artikel wird die Methode der eingebetteten Iframe -Kinderseite und der übergeordneten Seite JS -Kommunikation beschrieben. Teilen Sie es für Ihre Referenz. Die spezifische Analyse ist wie folgt:
Die Kommunikationsmethode zwischen der Seite und der Hauptseite im iFrame-Framework unterscheidet sich offensichtlich, je nachdem, ob das SRC-Attribut im IFrame mit demselben Domänen- oder Cross-Domain-Link verknüpft ist. Datenaustausch und DOM-Element Der gegenseitige Zugriff in derselben Domäne sind viel einfacher, während Cross-Domäne einige clevere Möglichkeiten erfordert, um Kommunikation zu erreichen.
1. Kommunikation zwischen Vater und Sohn Seiten unter derselben Domäne
Übergeordnete Seite übergeordnet.html:
Kopieren Sie den Code wie folgt: <html>
<kopf>
<script type = "text/javaScript">
Funktion sagt () {
alert ("parent.html ------> Ich bin bei parent.html");
}
Funktion CallChild ()
{
//document.frames?myframe" weibow.say()// Gilt nur für den IE -Browser
myframe.window.say ();
myframe.window.document.getElementById ("button"). value = "Ich habe geändert";
}
</script>
</head>
<body>
<Eingabe type = button value = "callChild ()">
<Iframe name = "myFrame" src = "child.html"> </iframe>
</body>
</html>
Subsce Child.html:
Kopieren Sie den Code wie folgt: <html>
<kopf>
<script type = "text/javaScript">
Funktion sagt ()
{
alert ("Child.html ---> Ich bin bei Child.html");
}
Funktion CallParent () {
parent.say ();
parent.window.document.getElementsByName ("myFrame") [0] .Style.Height = "100px";
}
</script>
</head>
<body>
<input id = "button" type = button value = "Aufrufen der Funktion Say () in parent.html" onclick = "CallParent ()">
</body>
</html>
Methodenaufruf
Wie im obigen Beispiel gezeigt, kann die Methode zum Aufrufen der untergeordneten Seite der übergeordneten Seite von: Framename.window.ChildMethod () verwendet werden; (Diese Methode ist mit verschiedenen Browsern kompatibel)
Die Methode der untergeordneten Seite, die die übergeordnete Seite aufruft: Eltern.Window.ParentMethod ();
DOM -Elementzugriff
Nach dem Erhalt des untergeordneten Fensterobjekts gemäß Framename.Window unterscheidet sich der Zugriff auf das DOM -Element nicht vom Zugriff auf das DOM -Element auf derselben Seite. Sie können den Code wie folgt kopieren: document.getElementById (), document.GetElementsByName () [index] Kopieren Sie den Code wie folgt: übergeordnet.Window.Document.getElementsByname ("MyFrame") [0];
myframe.window.document.getElementById ("Button") Windows kann weggelassen werden.
Dinge zu beachten
Um sicherzustellen, dass der Vorgang nach dem Laden des Iframe ausgeführt wird, verursacht er zweifellos einen Fehler. Es gibt zwei Möglichkeiten, um festzustellen, ob das Iframe geladen wurde:
1. Verwenden Sie das Onload -Ereignis auf Iframe;
2. Verwenden Sie das Dokument.
2. Kommunikationsmethode für übergeordnete Personalposition mit Cross-Domain
Wenn der Iframe eine externe Seite verlinkt, kann die Kommunikationsmethode unter demselben Domänennamen aufgrund des Sicherheitsmechanismus nicht verwendet werden.
Die übergeordnete Seite übergibt Daten an untergeordnete Seiten
Die Implementierungstechnik besteht darin, den Hash -Wert des Standortobjekts zu verwenden und Kommunikationsdaten darüber zu übergeben. Wir müssen nur eine zusätzliche #Data -Zeichenfolge nach dem SRC des IFRame hinzufügen (Daten sind die Daten, die Sie übergeben möchten), und die Daten auf der Kinderseite auf eine bestimmte Weise abrufen. Tatsächlich ist eine gemeinsame Methode:
1. Stellen Sie den Timer in der Unterseite mit der SetInterval -Methode ein, um die Änderungen des Standorts anzuhören. HREF, um die oben genannten Dateninformationen zu erhalten
2. Dann kann die Unterseite die entsprechende logische Verarbeitung basierend auf diesen Dateninformationen durchführen.
Die untergeordnete Seite übergibt Daten an die übergeordnete Seite
Die Implementierungstechnik besteht darin, einen Proxy -Iframe C zu verwenden, der in die untergeordnete Seite eingebettet ist und in derselben Domäne wie die übergeordnete Seite bleiben muss. Anschließend können wir die Daten der untergeordneten Seite an IFRAMEC übergeben, indem wir das Implementierungsprinzip der obigen Kommunikationsmethode voll verwenden. Die nächste Frage ist, wie IFRAMEC die Daten an die Hauptseite A übergeben können. Da IFRAMEC und die Hauptseite in derselben Domäne sind, wird es viel einfacher, Daten zwischen ihnen zu übergeben, was ein Kommunikationsproblem unter demselben Domain -Namen ist. Wie bereits erwähnt, können Sie hier ein häufig verwendetes Eigenschaftsfenster verwenden.
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.