Grundsätzlich habe ich eine iframe
in eine Seite eingebettete und iframe
einige JavaScript- Routinen, die ich von der übergeordneten Seite aus aufrufen muss.
Jetzt ist das Gegenteil ganz einfach, da Sie nur anrufen müssen parent.functionName()
, aber leider brauche ich genau das Gegenteil davon.
Bitte beachten Sie, dass mein Problem nicht darin besteht, die Quell- URL von zu ändern iframe
, sondern eine in der iframe
.
javascript
html
iframe
Tamas Czinege
quelle
quelle
Antworten:
Angenommen, die ID Ihres iFrames lautet "targetFrame" und die Funktion, die Sie aufrufen möchten, lautet
targetFunction()
:Sie können auf den Frame auch mit
window.frames
anstelle von zugreifendocument.getElementById
.quelle
document.getElementById('remote_iframe_0').contentWindow.my.create_element_gadget('verify_user');"
Remote_iframe_0 wird programmatisch von einem Apache-Shindig-Server erstellt,window.parent.document.getElementById('remote_iframe_0').contentWindow.my.create_element_gadget('verify_user');"
funktioniert aberHier sind einige Macken zu beachten.
HTMLIFrameElement.contentWindow
ist wahrscheinlich der einfachere Weg, aber es ist keine Standard-Eigenschaft und einige Browser unterstützen sie nicht, meistens ältere. Dies liegt daran, dass der DOM Level 1 HTML-Standard nichts zu demwindow
Objekt zu sagen hat .Sie können auch versuchen
HTMLIFrameElement.contentDocument.defaultView
, was einige ältere Browser zulassen, der IE jedoch nicht. Trotzdem sagt der Standard nicht ausdrücklich, dass Sie daswindow
Objekt aus dem gleichen Grund wie (1) zurückerhalten, aber Sie können hier ein paar zusätzliche Browserversionen abrufen, wenn Sie möchten.window.frames['name']
Das Zurückgeben des Fensters ist die älteste und damit zuverlässigste Schnittstelle. Sie müssen dann jedoch einname="..."
Attribut verwenden, um einen Frame nach Namen zu erhalten, der leicht hässlich /veraltet/ vorübergehend ist. (id="..."
wäre besser, aber IE mag das nicht.)window.frames[number]
ist auch sehr zuverlässig, aber den richtigen Index zu kennen, ist der Trick. Sie können damit z. Wenn Sie wissen, dass Sie nur den einen Iframe auf der Seite haben.Es ist durchaus möglich, dass der untergeordnete Iframe noch nicht geladen wurde oder dass etwas anderes schief gelaufen ist, um den Zugriff unzugänglich zu machen. Möglicherweise fällt es Ihnen leichter, den Kommunikationsfluss umzukehren: Lassen Sie den untergeordneten Iframe sein
window.parent
Skript benachrichtigen, wenn es vollständig geladen wurde und zurückgerufen werden kann. Durch Übergeben eines eigenen Objekts (z. B. einer Rückruffunktion) an das übergeordnete Skript kann dieses übergeordnete Objekt direkt mit dem Skript im Iframe kommunizieren, ohne sich Gedanken darüber machen zu müssen, mit welchem HTMLIFrameElement es verknüpft ist.quelle
methode()
Teil.Das Aufrufen einer übergeordneten JS-Funktion von
iframe
ist möglich, jedoch nur, wenn sowohl die übergeordnete JS-Funktion als auch die in die geladene Seiteiframe
aus derselben Domäne stammen, z. B. abc.com, und beide dasselbe Protokoll verwenden, dh beide entweder aktiviert sindhttp://
oderhttps://
.Der Anruf schlägt in den folgenden Fällen fehl:
Eine Umgehung dieser Einschränkung wäre äußerst unsicher.
Stellen Sie sich zum Beispiel vor, ich hätte die Domain superwinningcontest.com registriert und Links zu E-Mails von Personen gesendet. Wenn sie die Hauptseite geladen haben, konnte ich ein paar
iframe
Sekunden dort verstecken und ihren Facebook-Feed lesen, die letzten Amazon- oder PayPal-Transaktionen überprüfen oder - wenn sie einen Dienst nutzten, der keine ausreichende Sicherheit implementierte - Geld von ihnen überweisen Konten. Aus diesem Grund ist JavaScript auf dieselbe Domäne und dasselbe Protokoll beschränkt.quelle
Machen Sie im IFRAME Ihre Funktion für das Fensterobjekt öffentlich:
Verwenden Sie für den Zugriff von der übergeordneten Seite Folgendes:
quelle
onclick()
Ereignis einfach aufruftwindow.print()
. Dies druckt den Inhalt desiframe
perfekt. Wenn jedoch die öffentliche Funktion der Iframe-Seite aufgerufen wirdwindow.print()
und die übergeordnete Seite die öffentliche Funktion aufruft, wird der Inhalt der übergeordneten Seite gedruckt. Wie soll ich das codieren, damit sich der Aufruf vonwindow.print()
in der öffentlichen Funktion wie imonclick
Ereignis verhält ?onclick
. Sie möchten anrufeniframe.contentWindow.print()
.document.getElementById('myFrame').contentWindow.print();' and the pubic function
printContent () `(nicht der Oncick-Ereignishandler), der aufruft,window.print()
wurde folgendermaßen aufgerufen:document.getElementById('myFrame').contentWindow.printContent();
Wenn sich das Ziel des iFrames und das enthaltende Dokument in einer anderen Domäne befinden, funktionieren die zuvor veröffentlichten Methoden möglicherweise nicht, es gibt jedoch eine Lösung:
Wenn beispielsweise Dokument A ein iframe-Element enthält, das Dokument B enthält, und das Skript in Dokument A postMessage () für das Window-Objekt von Dokument B aufruft, wird ein Nachrichtenereignis für dieses Objekt ausgelöst, das als aus dem Fenster von stammend markiert ist Dokument A. Das Skript in Dokument A könnte folgendermaßen aussehen:
Um einen Ereignishandler für eingehende Ereignisse zu registrieren, verwendet das Skript addEventListener () (oder ähnliche Mechanismen). Das Skript in Dokument B könnte beispielsweise folgendermaßen aussehen:
Dieses Skript überprüft zunächst, ob die Domäne die erwartete Domäne ist, und überprüft dann die Nachricht, die entweder dem Benutzer angezeigt wird, oder sendet daraufhin eine Nachricht an das Dokument zurück, das die Nachricht zuerst gesendet hat.
über http://dev.w3.org/html5/postmsg/#web-messaging
quelle
Nur zur Veranschaulichung, ich bin heute auf dasselbe Problem gestoßen, aber dieses Mal wurde 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:
(Entschuldigung für die hässlichen Zeilenumbrüche, passte nicht in eine einzelne Zeile)
quelle
Der IFRAME sollte sich in der
frames[]
Sammlung befinden. Verwenden Sie so etwas wiequelle
method
eine Eigenschaft des iframe-window
Objekts erstellen muss .Quirksmode hatte einen Beitrag dazu .
Da die Seite jetzt kaputt ist und nur über archive.org zugänglich ist, habe ich sie hier reproduziert:
IFrames
Auf dieser Seite gebe ich einen kurzen Überblick über den Zugriff auf Iframes von der Seite, 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 vollständig separate Seite mit einer eigenen URL enthält, jedoch in einer anderen HTML-Seite platziert ist. Dies gibt sehr schöne Möglichkeiten im Webdesign. Das Problem besteht darin, auf den Iframe zuzugreifen, um beispielsweise eine neue Seite darin zu laden. Diese Seite erklärt, wie es geht.
Rahmen oder Objekt?
Die grundlegende Frage ist, ob der Iframe als Frame oder als Objekt gesehen wird.
top.frames[1].frames[2]
und dergleichen). Passt der Iframe in diese Frame-Hierarchie?document.getElementById('theiframe'))
um darauf zuzugreifen. Im Allgemeinen erlauben Browser beide Ansichten für "echte" (fest codierte) Iframes, aber generierte Iframes können nicht als Frames aufgerufen werden.NAME-Attribut
Die wichtigste Regel ist, jedem Iframe, den Sie erstellen, ein
name
Attribut zu geben, auch wenn Sie auch ein verwendenid
.Die meisten Browser benötigen das
name
Attribut, um den Iframe in die Frame-Hierarchie aufzunehmen. Einige Browser (insbesondere Mozilla) benötigen denid
, um den Iframe als Objekt zugänglich zu machen. Indem Sie dem Iframe beide Attribute zuweisen, bleiben Ihre Optionen offen. Istname
aber weitaus wichtiger alsid
.Zugriff
Entweder greifen Sie als Objekt auf den Iframe zu und ändern ihn,
src
oder Sie greifen als Frame auf den Iframe zu und ändern ihnlocation.href
.document.getElementById ('iframe_id'). src = 'newpage.html'; frame ['iframe_name']. location.href = 'newpage.html'; Die Rahmensyntax ist etwas vorzuziehen, da Opera 6 sie unterstützt, nicht jedoch die Objektsyntax.
Zugriff auf den Iframe
Für eine vollständige browserübergreifende Erfahrung sollten Sie dem iframe einen Namen geben und den verwenden
Syntax. Soweit ich weiß, funktioniert das immer.
Zugriff auf das Dokument
Der Zugriff auf das Dokument im Iframe ist recht einfach, sofern Sie das
name
Attribut verwenden. Führen Sie die folgenden Schritte aus, um die Anzahl der Links im Dokument im Iframe zu zählenframes['testiframe'].document.links.length
.Iframes generiert
Wenn Sie einen Iframe über das W3C-DOM generieren, wird der Iframe nicht sofort in das eingegeben
frames
Array , und dieframes['testiframe'].location.href
Syntax funktioniert nicht sofort. Der Browser benötigt einige Zeit, bis der Iframe im Array angezeigt wird. Während dieser Zeit kann möglicherweise kein Skript ausgeführt werden.Das
document.getElementById('testiframe').src
Syntax funktioniert unter allen Umständen einwandfrei.Das
target
Attribut eines Links funktioniert auch nicht mit generierten Iframes, außer in Opera, obwohl ich meinem generierten Iframe sowohl einname
als auch ein gegeben habeid
.Der Mangel an
target
Unterstützung bedeutet, dass Sie JavaScript verwenden müssen, um den Inhalt eines generierten Iframes zu ändern. Da Sie jedoch ohnehin JavaScript benötigen, um ihn zu generieren, sehe ich dies nicht als großes Problem an.Textgröße in Iframes
Ein merkwürdiger Explorer 6-Fehler:
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, sodass ein Teil des Textes möglicherweise unsichtbar wird oder Zeilenumbrüche auftreten können, während die Zeile noch ein anderes Wort enthalten kann.
quelle
Ich habe eine ziemlich elegante Lösung gefunden.
Wie Sie sagten, ist es ziemlich einfach, Code auszuführen, der sich im übergeordneten Dokument befindet. Und das ist die Basis meines Codes. Machen Sie genau das Gegenteil.
Wenn mein Iframe geladen wird, rufe ich eine Funktion auf, die sich im übergeordneten Dokument befindet, und übergebe als Argument einen Verweis auf eine lokale Funktion, die sich im Iframe-Dokument befindet. Das übergeordnete Dokument hat jetzt über diese Referenz direkten Zugriff auf die Funktion des Iframes.
Beispiel:
Auf dem Elternteil:
Auf dem Iframe:
Wenn der Iframe geladen wird, ruft er parent.tunnel (YourFunctionReference) auf, wodurch die im Parameter empfangene Funktion ausgeführt wird.
So einfach, ohne sich mit allen Nicht-Standard-Methoden der verschiedenen Browser auseinandersetzen zu müssen.
quelle
Einige dieser Antworten behandeln das CORS-Problem nicht oder machen nicht deutlich, wo Sie die Codefragmente platzieren, um die Kommunikation zu ermöglichen.
Hier ist ein konkretes Beispiel. Angenommen, ich möchte auf der übergeordneten Seite auf eine Schaltfläche klicken und diese im Iframe ausführen lassen. Hier ist, wie ich es machen würde.
parent_frame.html
iframe_page.html
Um in die andere Richtung zu gehen (klicken Sie auf die Schaltfläche innerhalb des Iframes, um die Methode außerhalb des Iframes aufzurufen), wechseln Sie einfach, wo sich das Code-Snippet befindet, und ändern Sie dies:
dazu:
quelle
Fortsetzung der Antwort von JoelAnair :
Verwenden Sie für mehr Robustheit Folgendes:
Arbeitete wie Charme :)
quelle
Nach der Antwort von Nitin Bansal
und für noch mehr Robustheit:
und
quelle
quelle
Gleiche Dinge, aber ein bisschen einfacher wird es sein, wie man eine übergeordnete Seite von einer Seite innerhalb des Iframes aktualisiert . Rufen Sie einfach die Funktion der übergeordneten Seite auf, um die Javascript-Funktion aufzurufen und die Seite neu zu laden:
Oder tun Sie dies direkt von der Seite in iframe:
Beides funktioniert.
quelle
Versuchen Sie es einfach
parent.myfunction()
quelle
Wenn Sie die JavaScript-Funktion auf dem übergeordneten Element über den Iframe aufrufen möchten, der von einer anderen Funktion (z. B. Shadowbox oder Lightbox) generiert wurde.
Sie sollten versuchen, das
window
Objekt zu verwenden und die übergeordnete Funktion aufzurufen:quelle
Verwenden Sie Folgendes, um die Funktion eines Frames auf der übergeordneten Seite aufzurufen
quelle