Wie greife ich mit jquery auf die übergeordnete iFrame-Seite zu?

267

Ich habe einen Iframe und um auf das übergeordnete Element zuzugreifen, habe ich folgenden Code implementiert:

window.parent.document.getElementById('parentPrice').innerHTML

Wie kann man mit jquery das gleiche Ergebnis erzielen?
UPDATE : Oder wie kann man mit jquery auf die übergeordnete iFrame-Seite zugreifen?

javascript jquery iframe Amr Elgarhy
quelle
Siehe auch stackoverflow.com/questions/12114243/…
Alexis Wilke

Antworten:

489

So finden Sie im übergeordneten Element des iFrame Folgendes:

$('#parentPrice', window.parent.document).html();

Der zweite Parameter für den $ () - Wrapper ist der Kontext, in dem gesucht werden soll. Dies ist standardmäßig dokumentiert.

Pim Jäger
quelle
18
Cool - du hast den Dank anerkannt, bevor er dir gedankt hat. StackOverflow hat vielleicht Probleme mit Zeitzonen?
Belugabob
21
Sie können auch Folgendes tun: $ (window.parent.document) .find ("# parentPrice"). Html ();
Jhorback
@belugabob Es ist die Schuld eines Zauberers.
Erik Escobedo
1
Vergessen Sie für diejenigen, die ein Windoid mit window.open gestartet haben, nicht den alten JS-Standard window.opener.document. $ ("# someDiv", window.opener.document) funktioniert.
John
2
Dies funktioniert nur, wenn in der Quelle des Iframes jQuery geladen ist. Nach meiner Erfahrung verfügt die iframe-Quelle nicht über jQuery, es ist jedoch häufig erforderlich, eine der jQuery-Funktionen des übergeordneten Elements aufzurufen. Verwenden Sie dazu: window.document. $ ("# ParentPrice"). Html () Dies war die Antwort, die Álvaro G. Vicario gepostet hat.
David Kinkead
39

So greifen Sie mit jquery auf die übergeordnete iFrame-Seite zu

window.parent.document.

jQuery ist eine Bibliothek über JavaScript und kein vollständiger Ersatz dafür. Sie müssen nicht jeden letzten JavaScript-Ausdruck durch etwas mit $ ersetzen.

Bobince
quelle
6
+1. jQuery ist großartig, aber viele Antworten auf einfache Probleme scheinen "use jQuery" zu sein. Wenn Sie die Bibliothek trotzdem laden, ist das in Ordnung, aber laden Sie sie nicht für eine Aufgabe. Außerdem scheinen die Leute besorgt über JS perf zu sein und verwenden dann eine API zusätzlich zu JS, um Dinge zu tun, die ohne die API leicht möglich (und möglicherweise schneller) sind.
Grant Wagner
1
@Grant Obwohl ich davon träume, dass jQuery in Browsern zu nativem Code wird.
Dan Blows
3
@ Blowski: Das ist mein Albtraum! jQuery enthält eine Menge äußerst komplexen und fragilen Codes, mit denen Sie eine offizielle API erstellen können.
Bobince
1
@bobince: Natürlich sollten Sie immer alles Javascript durch jQuery ersetzen. Es ist wie Speck; Es gibt keine Situation, in der weniger besser ist. ;)
MW.
2
Das OP hatte bereits window.parent.document, daher beantwortete dies nichts. Und stellen Sie sich vor, die Selektorlogik sei viel komplexer als die ID eines Elements, eine Situation, in der jQuery verdammt praktisch ist. Ich habe das Gefühl, die Frage lautet: "Wie sage ich auf Französisch" Hallo "?" und diese Antwort lautet "Deutsch sprechen".
Grantwparks
13

Wenn Sie die jQuery-Instanz im übergeordneten Dokument suchen müssen (z. B. um eine von einem Plug-In bereitgestellte Dienstprogrammfunktion aufzurufen), verwenden Sie eine der folgenden Syntaxen:

  • window.parent.$
  • window.parent.jQuery

Beispiel:

window.parent.$.modal.close();

jQuery wird an das windowObjekt angehängt und das window.parentist es.

Álvaro González
quelle
Ich verwende meinen Iframe wie ein Benutzersteuerelement. So kann ich es schön sauber halten.
Dan Randolph
11

Sie können von einem iframe aus auf Elemente des übergeordneten Fensters zugreifen, indem Sie Folgendes verwenden window.parent:

// using jquery    
window.parent.$("#element_id");

Welches ist das gleiche wie: 

// pure javascript
window.parent.document.getElementById("element_id");

Und wenn Sie mehr als einen verschachtelten Iframe haben und auf den obersten Iframe zugreifen möchten, können Sie Folgendes verwenden window.top:

// using jquery
window.top.$("#element_id");

Welches ist das gleiche wie: 

// pure javascript
window.top.document.getElementById("element_id");
Amr
quelle
7

im übergeordneten Fenster setzen:

<script>
function ifDoneChildFrame(val)
{
   $('#parentPrice').html(val);
}
</script>

und in die iframe src Datei setzen:

<script>window.parent.ifDoneChildFrame('Your value here');</script>
stieven
quelle
5

Ja, das funktioniert auch bei mir.

Hinweis: Wir müssen window.parent.document verwenden

    $("button", window.parent.document).click(function()
    {
        alert("Functionality defined by def");
    });
Yogesh Gandhi
quelle
5

Es funktioniert für mich mit einer kleinen Wendung. In meinem Fall muss ich den Wert von POPUP JS in das Formular PARENT WINDOW eintragen.

Also habe ich benutzt $('#ee_id',window.opener.document).val(eeID);

Ausgezeichnet!!!

Hitesh Patel
quelle
3

Könnte hier etwas spät zum Spiel kommen, aber ich habe gerade dieses fantastische jQuery-Plugin entdeckt: https://github.com/mkdynamic/jquery-popupwindow . Es verwendet grundsätzlich ein onUnload-Rückrufereignis, wartet also grundsätzlich auf das Schließen des untergeordneten Fensters und führt zu diesem Zeitpunkt alle erforderlichen Aufgaben aus. Es ist also wirklich nicht erforderlich, JS in das untergeordnete Fenster zu schreiben, um es an das übergeordnete Fenster zurückzugeben.

cj5
quelle
1

Es gibt mehrere Möglichkeiten, dies zu tun.

I) Hauptelternteil direkt holen.

für Exa. Ich möchte dann meine untergeordnete Seite durch iframe ersetzen

var link = '<%=Page.ResolveUrl("~/Home/SubscribeReport")%>';
top.location.replace(link);

hier wird top.location direkt übergeordnet.

II) Eltern eins nach dem anderen bekommen,

var element = $('.iframe:visible', window.parent.document);

Wenn Sie mehr als einen Iframe haben, geben Sie hier einen aktiven oder sichtbaren an.

Sie können dies auch tun, um weitere Eltern zu bekommen.

var masterParent = element.parent().parent().parent()

III) Eltern durch Kennung erhalten.

var myWindow = window.top.$("#Identifier")
Bharat
quelle