Aufrufen von JavaScript-Code in einem iframe von der übergeordneten Seite aus

Question

Im Grunde habe ich eine iframe eingebettet in eine Seite und die iframe hat einige JavaScript Routinen, die ich von der übergeordneten Seite aus aufrufen muss.

Das Gegenteil ist ganz einfach, denn Sie brauchen nur die parent.functionName() aber leider brauche ich genau das Gegenteil davon.

Bitte beachten Sie, dass mein Problem nicht darin besteht, die Quelle zu ändern URL der iframe aber der Aufruf einer Funktion, die in der iframe .

Answer 1

Einige dieser Antworten gehen nicht auf das CORS-Problem ein oder machen nicht deutlich, wo Sie die Codeschnipsel platzieren, um die Kommunikation zu ermöglichen.

Hier ist ein konkretes Beispiel. Angenommen, ich möchte auf eine Schaltfläche auf der übergeordneten Seite klicken und diese etwas innerhalb des iframe tun lassen. Hier ist, wie ich es tun würde.

übergeordneter_rahmen.html

<button id='parent_page_button' onclick='call_button_inside_frame()'></button>

function call_button_inside_frame() {
   document.getElementById('my_iframe').contentWindow.postMessage('foo','*');
}

iframe_page.html

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
    {
      if(event) {
        click_button_inside_frame();
    }
}

function click_button_inside_frame() {
   document.getElementById('frame_button').click();
}

Um in die andere Richtung zu gehen (klicken Sie auf die Schaltfläche innerhalb des iframe, um die Methode außerhalb des iframe aufzurufen), wechseln Sie einfach den Ort, an dem sich das Codeschnipsel befindet, und ändern Sie dies:

document.getElementById('my_iframe').contentWindow.postMessage('foo','*');

dazu:

window.parent.postMessage('foo','*')

Answer 2

Quirksmode hatte eine Beitrag zu dieser .

Da die Seite jetzt kaputt ist und nur noch über archive.org zugänglich ist, habe ich sie hier wiedergegeben:

IFrames

Auf dieser Seite gebe ich einen kurzen Überblick über den Zugriff auf Iframes von der Seite aus, auf der sie sich befinden. Es überrascht nicht, dass es einige Überlegungen zum Browser gibt.

Ein iframe ist ein Inline-Frame, ein Frame, der zwar eine völlig separate Seite mit einer eigenen URL enthält, aber dennoch innerhalb einer anderen HTML-Seite platziert ist. Dies bietet sehr gute Möglichkeiten für die Gestaltung von Webseiten. Das Problem besteht darin, auf den iframe zuzugreifen, beispielsweise um eine neue Seite in ihn zu laden. Diese Seite erklärt, wie man das macht.

Rahmen oder Objekt?

Die grundlegende Frage ist, ob der iframe als Rahmen oder als Objekt betrachtet wird.

• Wie auf der Website Einführung in Rahmen Seiten, wenn Sie Frames verwenden, erstellt der Browser eine Frame-Hierarchie für Sie ( top.frames[1].frames[2] und so weiter). Passt der iframe in diese Rahmenhierarchie?
• Oder sieht der Browser einen iframe nur als ein weiteres Objekt an, ein Objekt, das zufällig eine src-Eigenschaft hat? In diesem Fall müssen wir eine Standard DOM-Aufruf (wie document.getElementById('theiframe')) um darauf zuzugreifen. Im Allgemeinen erlauben Browser beide Ansichten auf "echte" (fest kodierte) iframes, aber auf generierte iframes kann nicht als Frames zugegriffen werden.

Attribut NAME

Die wichtigste Regel ist, dass Sie jedem iframe, den Sie erstellen, eine name Attribut, auch wenn Sie zusätzlich ein id .

<iframe src="iframe_page1.html"
    id="testiframe"
    name="testiframe"></iframe>

Die meisten Browser benötigen die name Attribut, um den iframe zu einem Teil der Framehierarchie zu machen. Einige Browser (vor allem Mozilla) benötigen das id um den iframe als Objekt zugänglich zu machen. Indem Sie dem iframe beide Attribute zuweisen, halten Sie sich Ihre Optionen offen. Aber name ist weitaus wichtiger als id .

Zugang

Entweder Sie greifen auf den iframe als Objekt zu und ändern seine src oder Sie greifen auf den iframe als Frame zu und ändern seine location.href .

document.getElementById('iframe_id').src = 'newpage.html'; frames['iframe_name'].location.href = 'neueSeite.html'; Die Framesyntax ist leicht vorzuziehen, da Opera 6 sie unterstützt, nicht aber die Objektsyntax.

Zugriff auf den iframe

Für eine vollständige browserübergreifende Erfahrung sollten Sie dem iframe also einen Namen geben und die

frames['testiframe'].location.href

Syntax. Soweit ich weiß, funktioniert das immer.

Zugriff auf das Dokument

Der Zugriff auf das Dokument innerhalb des iframe ist recht einfach, vorausgesetzt, Sie verwenden die name Attribut. Um die Anzahl der Links im Dokument im iframe zu zählen, gehen Sie wie folgt vor frames['testiframe'].document.links.length .

Generierte iframes

Wenn Sie einen iframe über die Funktion W3C DOM wird der iframe nicht sofort in die frames Array, und die frames['testiframe'].location.href Die Syntax wird nicht sofort funktionieren. Der Browser braucht ein wenig Zeit, bevor der iframe im Array auftaucht, Zeit, in der kein Skript laufen darf.

El document.getElementById('testiframe').src Syntax funktioniert unter allen Umständen gut.

El target Attribut eines Links funktioniert auch nicht mit generierten iframes, außer in Opera, obwohl ich meinem generierten iframe sowohl ein name und ein id .

Das Fehlen von target Unterstützung bedeutet, dass Sie JavaScript verwenden müssen, um den Inhalt eines generierten iframe zu ändern, aber da Sie sowieso JavaScript benötigen, um ihn überhaupt zu generieren, sehe ich dies nicht als großes Problem an.

Textgröße in Iframes

Ein merkwürdiger Fehler, der nur im Explorer 6 auftritt:

Wenn Sie die Textgröße über das Menü "Ansicht" ändern, werden die Textgrößen in Iframes korrekt geändert. Dieser Browser ändert jedoch nicht die Zeilenumbrüche im Originaltext, so dass ein Teil des Textes unsichtbar werden kann oder Zeilenumbrüche auftreten können, während die Zeile noch ein weiteres Wort enthalten könnte.

Answer 3

Nur fürs Protokoll: Ich bin heute auf dasselbe Problem gestoßen, aber dieses Mal war die Seite in ein Objekt eingebettet, nicht in einen iframe (da es sich um ein XHTML 1.1-Dokument handelte). So funktioniert es mit Objekten:

document
  .getElementById('targetFrame')
  .contentDocument
  .defaultView
  .targetFunction();

(Entschuldigung für die hässlichen Zeilenumbrüche, passten nicht in eine einzige Zeile)

Answer 4

Der IFRAME sollte sich im Bereich frames[] Sammlung. Verwenden Sie etwas wie

frames['iframeid'].method();

Answer 5

Ich habe eine recht elegante Lösung gefunden.

Wie Sie sagten, ist es ziemlich einfach, Code aus dem übergeordneten Dokument auszuführen. Und das ist die Basis meines Codes, um genau das Gegenteil zu tun.

Wenn mein iframe geladen wird, rufe ich eine Funktion im übergeordneten Dokument auf und übergebe als Argument einen Verweis auf eine lokale Funktion, die sich im Dokument des iframe befindet. Das übergeordnete Dokument hat nun über diesen Verweis direkten Zugriff auf die Funktion des iframe.

Beispiel:

Bei den Eltern:

function tunnel(fn) {
    fn();
}

Auf dem iframe:

var myFunction = function() {
    alert("This work!");
}

parent.tunnel(myFunction);

Wenn der iframe geladen wird, ruft er parent.tunnel(YourFunctionReference) auf, das die im Parameter empfangene Funktion ausführt.

So einfach ist das, ohne dass man sich mit all den nicht standardisierten Methoden der verschiedenen Browser herumschlagen muss.