Methode zur Kommunikation zwischen der eingebetteten Iframe-Unterseite und der übergeordneten Seite. js_javascript-Fähigkeiten

Das Beispiel in diesem Artikel beschreibt die Methode der Kommunikation zwischen der eingebetteten Iframe-Unterseite und den übergeordneten Seiten-JS. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Die Kommunikationsmethode zwischen der Seite im Iframe-Frame und der Hauptseite hängt davon ab, ob das src-Attribut im Iframe ein domänenübergreifender Link oder ein domänenübergreifender Datenaustausch ist Der Zugriff auf DOM-Elemente in derselben Domäne ist einfach, und domänenübergreifende Elemente erfordern einige clevere Möglichkeiten, um eine Kommunikation zu erreichen.

1. Kommunikation zwischen übergeordneten und untergeordneten Seiten in derselben Domain

Übergeordnete Seite parent.html:

Code kopieren Der Code lautet wie folgt:

auf

Untergeordnete Seite child.html:

Code kopieren Der Code lautet wie folgt:

Methodenaufruf

Wie im obigen Beispiel gezeigt, kann die übergeordnete Seite die untergeordnete Seite aufrufen über: FrameName.window.childMethod(); (Diese Methode ist mit verschiedenen Browsern kompatibel)
Die untergeordnete Seite ruft die Methode der übergeordneten Seite auf: parent.window.parentMethod();

DOM-Elementzugriff

Nach dem Abrufen des untergeordneten Fensterobjekts basierend auf FrameName.window unterscheidet sich der Zugriff auf die darin enthaltenen DOM-Elemente nicht vom Zugriff auf die DOM-Elemente auf derselben Seite. Sie können

Kopieren Code Der Code lautet wie folgt:

document.getElementById(),document.getElementsByName()[index]

Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

parent.window.document.getElementsByName("myFrame")[0];
myFrame.window.document.getElementById("button")

Die Fenster können weggelassen werden.

Notizen

Stellen Sie sicher, dass Sie den Vorgang ausführen, nachdem der Iframe geladen wurde. Wenn Sie mit dem Aufrufen von Methoden oder Variablen beginnen, bevor der Iframe geladen ist, treten zweifellos Fehler auf. Es gibt zwei Möglichkeiten festzustellen, ob der Iframe geladen wurde:

1. Onload-Ereignis auf Iframe verwenden;
2. Verwenden Sie document.readyState=="complete", um

zu bestimmen

2. Domainübergreifende Eltern-Kind-Seiten-Kommunikationsmethode

Wenn der Iframe auf eine externe Seite verweist, kann die Kommunikationsmethode unter demselben Domainnamen aufgrund des Sicherheitsmechanismus nicht verwendet werden.

Übergeordnete Seite übergibt Daten an untergeordnete Seite

Der Trick, dies zu erreichen, besteht darin, den Hash-Wert des Standortobjekts zu verwenden, um Kommunikationsdaten darüber zu leiten. Wir müssen nur eine #data-Zeichenfolge nach dem src des Iframes auf der übergeordneten Seite hinzufügen (Daten sind die Daten, die Sie haben). Ich möchte weitergeben) und dann auf der untergeordneten Seite. Die Daten hier können sofort über eine Methode auf der Seite abgerufen werden. Tatsächlich ist eine häufig verwendete Methode:

1. Stellen Sie den Timer auf der Unterseite über die setInterval-Methode ein und überwachen Sie die Änderungen in location.href, um die oben genannten Dateninformationen zu erhalten

2. Dann kann die Unterseite basierend auf diesen Dateninformationen eine entsprechende logische Verarbeitung durchführen.

Die untergeordnete Seite übergibt Daten an die übergeordnete Seite

Der Trick für die Implementierung 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. Dann können wir das Implementierungsprinzip der ersten Kommunikationsmethode oben vollständig nutzen Um die untergeordnete Seite zu übertragen, werden die Daten an iframeC übergeben. Die nächste Frage ist, wie iframeC die Daten an die Hauptseite A übergeben kann. Da sich iframeC und die Hauptseite in derselben Domäne befinden, wird die Datenübertragung zwischen ihnen viel einfacher Sie gehören zum gleichen Domänennamen, wie bereits erwähnt. Hier können Sie eine häufig verwendete Eigenschaft window.top verwenden (Sie können auch window.parent.parent verwenden), die einen Verweis auf das Fenster der obersten Ebene zurückgibt Objekt im Browser geladen. Auf diese Weise können wir die Methoden auf der übergeordneten Seite direkt verwenden.

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.