jak uzyskać dostęp do strony nadrzędnej iFrame za pomocą jquery?

267

Mam element iframe i aby uzyskać dostęp do elementu nadrzędnego, zaimplementowałem następujący kod:

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

Jak uzyskać ten sam wynik za pomocą jquery?
AKTUALIZACJA : Lub jak uzyskać dostęp do strony nadrzędnej iFrame za pomocą jquery?

javascript jquery iframe Amr Elgarhy
źródło
Zobacz także stackoverflow.com/questions/12114243/…
Alexis Wilke,

Odpowiedzi:

489

Aby znaleźć w obiekcie nadrzędnym elementu iFrame, użyj:

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

Drugim parametrem opakowania $ () jest kontekst wyszukiwania. Domyślnie dokumentuje.

Pim Jager
źródło
18
Fajnie - podziękowałeś, zanim podziękował. StackOverflow może mieć problemy ze strefami czasowymi?
belugabob,
21
Możesz także: $ (window.parent.document) .find ("# parentPrice"). Html ();
jhorback
@belugabob To wina czarodzieja.
Erik Escobedo
1
Dla tych, którzy uruchomili windoid z Window.open, nie zapomnij o tym starym standardowym JS window.opener.document. $ („# someDiv”, window.opener.document) działa.
jjohn
2
Działa to tylko wtedy, gdy do źródła iframe załadowano jQuery. Z mojego doświadczenia wynika, że ​​źródło iframe nie miałoby jQuery, ale często potrzeba wywołania jednej z funkcji jQuery rodzica jest często potrzebna. Aby to zrobić, użyj: window.document. $ ("# ParentPrice"). Html () To była odpowiedź, którą napisał Álvaro G. Vicario.
David Kinkead,
39

jak uzyskać dostęp do strony nadrzędnej iFrame za pomocą jquery

window.parent.document.

jQuery to biblioteka oparta na JavaScript, a nie jej kompletny zamiennik. Nie musisz zamieniać każdego ostatniego wyrażenia JavaScript na coś zawierającego $.

Bobin
źródło
6
+1. jQuery jest świetny, ale wiele odpowiedzi na proste problemy wydaje się „używać jQuery”. Jeśli i tak ładujesz bibliotekę, dobrze, ale nie ładuj jej jednego zadania. Ponadto ludzie wydają się zaniepokojeni JS perf, a następnie używają API na JS, aby robić rzeczy łatwo możliwe (i być może szybsze) bez API.
Grant Wagner,
1
@Grant Chociaż marzę, aby jQuery stał się natywnym kodem w przeglądarkach.
Dan Blows
3
@Bowski: to mój koszmar! jQuery zawiera wiele niezwykle złożonego i delikatnego kodu „zrób to, co mam na myśli”, który byłby całkowicie nieodpowiedni do umieszczenia w oficjalnym API.
bobince
1
@ Bobin: Oczywiście, zawsze powinieneś zamieniać cały JavaScript na jQuery. To jest jak bekon; nie ma sytuacji, w której mniej znaczy lepiej. ;)
MW.
2
OP miał już window.parent.document, więc nic nie odpowiedział. Wyobraź sobie, że logika selektora jest o wiele bardziej złożona niż identyfikator elementu, co jest bardzo przydatne w przypadku jQuery. Wydaje mi się, że pytanie brzmi „jak powiedzieć„ cześć ”po francusku?” a ta odpowiedź brzmi „mówić po niemiecku”.
grantwparks
13

Jeśli potrzebujesz znaleźć instancję jQuery w dokumencie nadrzędnym (np. Aby wywołać funkcję narzędzia dostarczoną przez wtyczkę), użyj jednej z następujących składni:

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

Przykład:

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

jQuery zostaje przywiązany do windowobiektu i tak właśnie window.parentjest.

Álvaro González
źródło
Używam mojego iframe jak kontroli użytkownika. To pozwala mi zachować ładność i czystość.
Dan Randolph,
11

Możesz uzyskać dostęp do elementów okna nadrzędnego z poziomu elementu iframe, wykonując window.parentnastępujące czynności:

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

Który jest taki sam jak: 

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

A jeśli masz więcej niż jedną zagnieżdżoną ramkę iframe i chcesz uzyskać dostęp do najwyższej ramki iframe, możesz użyć window.toptego w następujący sposób:

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

Który jest taki sam jak: 

// pure javascript
window.top.document.getElementById("element_id");
Amr
źródło
7

w oknie nadrzędnym wstaw:

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

i w pliku src iframe wstaw:

<script>window.parent.ifDoneChildFrame('Your value here');</script>
silniejszy
źródło
5

tak, to też działa dla mnie.

Uwaga: musimy użyć window.parent.document

    $("button", window.parent.document).click(function()
    {
        alert("Functionality defined by def");
    });
Yogesh Gandhi
źródło
5

Działa dla mnie z niewielką niespodzianką. W moim przypadku muszę podać wartość z POPUP JS do formularza PARENT WINDOW.

Więc użyłem $('#ee_id',window.opener.document).val(eeID);

Doskonały!!!

Hitesh Patel
źródło
3

Może tu być trochę za późno na grę, ale właśnie odkryłem tę fantastyczną wtyczkę jQuery https://github.com/mkdynamic/jquery-popupwindow . Zasadniczo używa zdarzenia zwrotnego onUnload, więc w zasadzie nasłuchuje zamknięcia okna potomnego i wykona w tym momencie wszelkie niezbędne czynności. Tak więc naprawdę nie ma potrzeby pisania JS w oknie potomnym, aby przekazać je z powrotem rodzicowi.

cj5
źródło
1

Można to zrobić na wiele sposobów.

I) Uzyskaj głównego rodzica bezpośrednio.

na przykład Chcę wtedy zamienić moją stronę podrzędną na iframe

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

tutaj top.location pobiera bezpośrednio rodzica.

II) weź rodzica jeden po drugim,

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

tutaj, jeśli masz więcej niż jedną ramkę iframe, określ aktywną lub widoczną.

możesz to zrobić, aby zdobyć kolejnych rodziców,

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

III) Uzyskaj rodzica poprzez identyfikator.

var myWindow = window.top.$("#Identifier")
Bharat
źródło