bagaimana cara mengakses halaman induk iFrame menggunakan jquery?

267

Saya memiliki iframe dan untuk mengakses elemen induk saya menerapkan kode berikut:

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

Bagaimana cara mendapatkan hasil yang sama menggunakan jquery?
PEMBARUAN : Atau bagaimana cara mengakses halaman induk iFrame menggunakan jquery?

javascript jquery iframe Amr Elgarhy
sumber
Lihat juga stackoverflow.com/questions/12114243/...
Alexis Wilke

Jawaban:

489

Untuk menemukan di induk dari iFrame gunakan:

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

Parameter kedua untuk pembungkus $ () adalah konteks untuk pencarian. Ini standar untuk didokumentasikan.

Pim Jager
sumber
18
Keren - Anda mengucapkan terima kasih sebelum dia mengucapkan terima kasih. StackOverflow mungkin memiliki masalah dengan zona waktu?
belugabob
21
Anda juga dapat melakukan: $ (window.parent.document) .find ("# parentPrice"). Html ();
jhorback
@belugabob Ini salah wizzard.
Erik Escobedo
1
Bagi mereka yang meluncurkan windoid dengan window.open, jangan lupa tentang window.opener.document JS standar lama itu. $ ("# someDiv", window.opener.document) berfungsi.
jjohn
2
Ini hanya akan berfungsi jika sumber iframe memuat jQuery. Dalam pengalaman saya, sumber iframe tidak akan memiliki jQuery tetapi kebutuhan untuk memanggil salah satu fungsi jQuery orang tua sering diperlukan. Untuk melakukan ini gunakan: window.document. $ ("# ParentPrice"). Html () Ini adalah jawaban Álvaro G. Vicario yang diposting.
David Kinkead
39

cara mengakses halaman induk iFrame menggunakan jquery

window.parent.document.

jQuery adalah perpustakaan di atas JavaScript, bukan pengganti yang lengkap untuk itu. Anda tidak perlu mengganti setiap ekspresi JavaScript terakhir dengan sesuatu yang melibatkan $.

bobince
sumber
6
+1. jQuery bagus, tetapi banyak jawaban untuk masalah sederhana tampaknya 'gunakan jQuery'. Jika Anda memuat pustaka, baiklah, tetapi jangan memuatnya satu tugas. Selain itu, orang-orang tampaknya peduli dengan perf JS, kemudian menggunakan API di atas JS untuk melakukan hal-hal yang mungkin dengan mudah (dan mungkin lebih cepat) tanpa API.
Grant Wagner
1
@Gran Meskipun saya bermimpi jQuery menjadi kode asli di dalam browser.
Dan Blows
3
@ Bowowski: itu mimpi buruk saya! jQuery mengandung banyak kode "lakukan apa yang saya maksud" yang sangat kompleks dan rapuh yang sama sekali tidak pantas untuk dimasukkan ke dalam API resmi.
bobince
1
@obobince: Jelas, Anda harus selalu mengganti semua Javascript dengan jQuery. Ini seperti bacon; tidak ada situasi di mana lebih sedikit lebih baik. ;)
MW.
2
OP sudah memiliki window.parent.document, jadi ini tidak menjawab apa pun. Dan bayangkan logika pemilih menjadi jauh lebih kompleks daripada ID elemen, sebuah situasi di mana jQuery sangat berguna. Saya merasa pertanyaannya adalah "bagaimana saya mengatakan 'halo' dalam bahasa Prancis?" dan jawaban ini adalah "berbicara bahasa Jerman".
Grantwparks
13

Jika Anda perlu menemukan instance jQuery di dokumen induk (mis., Untuk memanggil fungsi utilitas yang disediakan oleh plug-in) gunakan salah satu sintaks berikut:

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

Contoh:

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

jQuery dilampirkan ke windowobjek dan itulah yang window.parent.

Álvaro González
sumber
Saya menggunakan iframe saya seperti kontrol pengguna. Ini membuat saya tetap bagus dan bersih.
Dan Randolph
11

Anda dapat mengakses elemen jendela induk dari dalam iframe dengan menggunakan window.parentseperti ini:

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

Yang sama dengan: 

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

Dan jika Anda memiliki lebih dari satu iframe bersarang dan Anda ingin mengakses iframe teratas, maka Anda dapat menggunakan window.topseperti ini:

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

Yang sama dengan: 

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

di jendela induk masukkan:

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

dan di file iframe src cantumkan:

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

ya itu bekerja untuk saya juga.

Catatan: kita perlu menggunakan window.parent.document

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

Ini bekerja untuk saya dengan sedikit twist. Dalam kasus saya, saya harus mengisi nilai dari POPUP JS ke formulir PARENT WINDOW.

Jadi saya sudah menggunakan $('#ee_id',window.opener.document).val(eeID);

Luar Biasa !!!

Hitesh Patel
sumber
3

Mungkin agak terlambat ke permainan di sini, tapi saya baru saja menemukan plugin jQuery fantastis ini https://github.com/mkdynamic/jquery-popupwindow . Ini pada dasarnya menggunakan event callback onUnload, jadi pada dasarnya mendengarkan keluar untuk penutupan jendela anak, dan akan melakukan hal-hal yang diperlukan pada saat itu. JADI, benar-benar tidak perlu menulis JS apa pun di jendela anak untuk meneruskannya kepada orang tua.

cj5
sumber
1

Ada beberapa cara untuk melakukan ini.

I) Dapatkan orang tua utama secara langsung.

untuk exa. saya ingin mengganti halaman anak saya ke iframe lalu

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

di sini top.location mendapat orang tua secara langsung.

II) dapatkan orang tua satu per satu,

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

di sini jika Anda memiliki lebih dari satu iframe, maka tentukan yang aktif atau yang terlihat.

Anda juga bisa melakukan ini untuk mendapatkan orang tua lebih lanjut,

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

III) dapatkan orang tua dengan Identifier.

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