Zusammenfassung der Funktionsweise von JS auf Seiten innerhalb und außerhalb von Iframes

Holen Sie sich den Inhalt des Iframes außerhalb des Iframes

Methode 1

Über die beiden APIs contentWindow und contentDocument:

var iframe = document.getElementById("iframe1");
var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
var idocument = iframe.contentDocument;
console.log("window",iwindow); //Holen Sie sich das Fensterobjekt des Iframes console.log("document",idoc); //Holen Sie sich das Dokument des Iframes
console.log("html",idoc.documentElement);//Holen Sie sich das HTML des Iframes

Darunter kann iframe.contentWindow das Fensterobjekt von iframe abrufen und iframe.contentDocument das Dokumentobjekt von iframe abrufen.

Methode 2

In Kombination mit dem Attribut „Name“ erhalten Sie es über die vom Fenster bereitgestellten Rahmen:

<iframe src ="/index.html" id="ifr1" name="ifr2" scrolling="ja">
  <p>Ihr Browser unterstützt keine Iframes.</p>
</iframe>
<Skripttyp="text/javascript">
    Konsole.log(Fenster.Frames['ifr2'].Fenster);
    console.dir(document.getElementById("iframe").contentWindow);
</Skript>

Holen Sie sich Inhalte außerhalb des Iframes innerhalb des Iframes

window.parent ruft das Fensterobjekt der vorherigen Ebene ab. Wenn es immer noch ein Iframe ist, ist es das Fensterobjekt des Iframes.
window.top ruft das Fensterobjekt des Containers der obersten Ebene ab, also das Dokument der Seite, die Sie geöffnet haben

Aufrufen von Methoden und Variablen, die auf der übergeordneten Seite im Iframe definiert sind

Fenster.übergeordnet.Fenster.übergeordneteMethode();
Fenster.übergeordnet.Fenster.übergeordneterWert;

Methoden und Variablen zum Bedienen von Iframe-Unterseiten auf der übergeordneten Seite

window.frames["iframe_Name"].window.childMethod();
Fenster.Frames["iFrame_Name"].Fenster.Unterwert;

Zusammenfassen

Beim Einsatz von Iframe sind noch zwei weitere Punkte zu beachten:

1. Stellen Sie sicher, dass Sie Vorgänge ausführen, nachdem das Iframe geladen wurde. Wenn Sie Methoden oder Variablen innerhalb des Iframes aufrufen, bevor dieser geladen wurde, tritt ein Fehler auf.
2. Wenn der Iframe auf eine externe Seite verweist, kann der Sicherheitsmechanismus die Kommunikationsmethode nicht unter demselben Domänennamen verwenden.

Ermitteln, ob das Laden des Iframes abgeschlossen ist

iframe.onload = Funktion() {
    //ZU TUN
}

Kommunikation in unterschiedlichen Domänen

Übergeben von Daten von der übergeordneten Seite an die untergeordnete Seite

Verwenden Sie den Hashwert des Standortobjekts, um Kommunikationsdaten hindurchzuleiten. Fügen Sie nach dem src des Iframes auf der übergeordneten Seite eine Datenzeichenfolge hinzu und rufen Sie die Daten dann hier sofort auf irgendeine Weise auf der untergeordneten Seite ab.

Unterseite übergibt Daten an übergeordnete Seite

Es wird ein Proxy-Iframe verwendet, der in die untergeordnete Seite eingebettet ist und sich in derselben Domäne wie die übergeordnete Seite befinden muss. Dann wird das oben erwähnte Implementierungsprinzip der Methode der Kommunikation in derselben Domäne vollständig genutzt, um die Daten der untergeordneten Seite an den Proxy-Iframe zu übergeben. Da sich der Proxy-Iframe und die Hauptseite in derselben Domäne befinden, kann die Hauptseite diese Daten mit derselben Domänenmethode abrufen.

Dies ist das Ende dieses Artikels darüber, wie JS auf Seiten innerhalb und außerhalb des Iframes ausgeführt werden kann. Weitere relevante Inhalte zum Ausführen von JS auf Iframe-Seiten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!