Pada dasarnya, saya memiliki iframe
embedded di halaman dan iframe
memiliki beberapa rutinitas JavaScript yang saya butuhkan dari halaman induk.
Sekarang kebalikannya cukup sederhana karena Anda hanya perlu menelepon parent.functionName()
, tetapi sayangnya, saya perlu kebalikannya.
Harap dicatat bahwa masalah saya tidak mengubah sumber URL dari iframe
, tapi menyerukan fungsi didefinisikan dalam iframe
.
javascript
html
iframe
Tamas Czinege
sumber
sumber
Jawaban:
Asumsikan id iFrame Anda adalah "targetFrame" dan fungsi yang ingin Anda panggil adalah
targetFunction()
:Anda juga dapat mengakses bingkai menggunakan
window.frames
bukandocument.getElementById
.sumber
document.getElementById('remote_iframe_0').contentWindow.my.create_element_gadget('verify_user');"
remote_iframe_0 dibuat secara terprogram oleh server apache shindig tetapiwindow.parent.document.getElementById('remote_iframe_0').contentWindow.my.create_element_gadget('verify_user');"
berfungsiAda beberapa kebiasaan yang perlu diperhatikan di sini.
HTMLIFrameElement.contentWindow
mungkin cara yang lebih mudah, tetapi itu bukan properti standar dan beberapa browser tidak mendukungnya, kebanyakan lebih tua. Ini karena standar HTML DOM Level 1 tidak ada hubungannya denganwindow
objek.Anda juga dapat mencoba
HTMLIFrameElement.contentDocument.defaultView
, yang memungkinkan beberapa peramban yang lebih tua tetapi IE tidak. Meski begitu, standar tidak secara eksplisit mengatakan bahwa Anda mendapatkanwindow
objek kembali, untuk alasan yang sama seperti (1), tetapi Anda dapat mengambil beberapa versi browser tambahan di sini jika Anda peduli.window.frames['name']
mengembalikan jendela adalah antarmuka tertua dan karenanya paling dapat diandalkan. Tetapi Anda kemudian harus menggunakanname="..."
atribut untuk bisa mendapatkan bingkai dengan nama, yang sedikit jelek /usang/ transisional. (id="..."
akan lebih baik tetapi IE tidak suka itu.)window.frames[number]
juga sangat dapat diandalkan, tetapi mengetahui indeks yang tepat adalah triknya. Anda bisa lolos dengan ini misalnya. jika Anda tahu Anda hanya memiliki satu iframe di halaman.Sangat mungkin anak iframe belum memuat, atau sesuatu yang salah membuatnya tidak dapat diakses. Anda mungkin lebih mudah membalikkan arus komunikasi: yaitu, mintalah anak iframe memberi tahu
window.parent
skripnya ketika sudah selesai dimuat dan siap dipanggil kembali. Dengan mengirimkan salah satu objeknya sendiri (mis. Fungsi panggilan balik) ke skrip induk, induk tersebut kemudian dapat berkomunikasi langsung dengan skrip di iframe tanpa harus khawatir tentang HTMLIFrameElement yang terkait dengannya.sumber
methode()
bagian itu.Memanggil fungsi JS induk dari
iframe
dimungkinkan, tetapi hanya ketika kedua induk dan halaman yang dimuat dalamiframe
berasal dari domain yang sama yaitu abc.com, dan keduanya menggunakan protokol yang sama yaitu keduanya aktifhttp://
atauhttps://
.Panggilan akan gagal dalam kasus yang disebutkan di bawah ini:
Solusi untuk pembatasan ini akan sangat tidak aman.
Sebagai contoh, bayangkan saya mendaftarkan domain superwinningcontest.com dan mengirimkan tautan ke email orang. Ketika mereka memuat halaman utama, saya bisa menyembunyikan beberapa
iframe
di sana dan membaca umpan Facebook mereka, memeriksa transaksi Amazon atau PayPal baru-baru ini, atau - jika mereka menggunakan layanan yang tidak menerapkan keamanan yang memadai - transfer uang keluar dari mereka akun. Itu sebabnya JavaScript terbatas pada domain yang sama dan protokol yang sama.sumber
Di IFRAME, jadikan fungsi Anda publik untuk objek jendela:
Untuk akses dari halaman induk, gunakan ini:
sumber
onclick()
acaranya hanya memanggilwindow.print()
. Ini mencetak konten denganiframe
sempurna. Tetapi ketika fungsi publik halaman iframe memanggilwindow.print()
dan jika halaman induk memanggil fungsi publik, konten induk dicetak. Bagaimana saya harus mengkode ini sehingga panggilan kewindow.print()
dalam fungsi publik berperilaku seperti halnya dalamonclick
acara tersebut?onclick
. Anda ingin meneleponiframe.contentWindow.print()
.document.getElementById('myFrame').contentWindow.print();' and the pubic function
printContent () `(bukan pengendali event oncick) yangwindow.print()
dipanggil dengan cara ini:document.getElementById('myFrame').contentWindow.printContent();
Jika target iFrame dan dokumen yang berisi berada di domain yang berbeda, metode yang diposting sebelumnya mungkin tidak berfungsi, tetapi ada solusinya:
Misalnya, jika dokumen A berisi elemen iframe yang berisi dokumen B, dan skrip dalam dokumen A memanggil postMessage () pada objek Window dari dokumen B, maka peristiwa pesan akan ditembakkan pada objek itu, ditandai sebagai berasal dari Window of the dokumen A. Naskah dalam dokumen A mungkin terlihat seperti:
Untuk mendaftarkan pengendali acara untuk acara yang masuk, skrip akan menggunakan addEventListener () (atau mekanisme serupa). Misalnya, skrip dalam dokumen B mungkin terlihat seperti:
Skrip ini pertama-tama memeriksa domain adalah domain yang diharapkan, dan kemudian melihat pesan, yang ditampilkannya kepada pengguna, atau ditanggapi dengan mengirim pesan kembali ke dokumen yang mengirim pesan di tempat pertama.
via http://dev.w3.org/html5/postmsg/#web-messaging
sumber
Sekadar catatan, saya mengalami masalah yang sama hari ini, tetapi kali ini halamannya disematkan pada objek, bukan iframe (karena itu adalah dokumen XHTML 1.1). Begini cara kerjanya dengan objek:
(maaf untuk jeda baris jelek, tidak cocok dalam satu baris)
sumber
IFRAME harus dalam
frames[]
koleksi. Gunakan sesuatu sepertisumber
method
properti dari objek iframewindow
.Quirksmode punya pos tentang ini .
Karena halaman sekarang rusak, dan hanya dapat diakses melalui archive.org, saya mereproduksi di sini:
IFrames
Pada halaman ini saya memberikan gambaran singkat tentang mengakses iframe dari halaman yang sedang mereka buka. Tidak mengherankan, ada beberapa pertimbangan browser.
Iframe adalah bingkai inline, sebuah bingkai yang, meskipun mengandung halaman yang sepenuhnya terpisah dengan URL-nya sendiri, tetap ditempatkan di dalam halaman HTML lain. Ini memberikan kemungkinan yang sangat bagus dalam desain web. Masalahnya adalah untuk mengakses iframe, misalnya untuk memuat halaman baru ke dalamnya. Halaman ini menjelaskan cara melakukannya.
Bingkai atau objek?
Pertanyaan mendasarnya adalah apakah iframe dilihat sebagai bingkai atau sebagai objek.
top.frames[1].frames[2]
dan semacamnya). Apakah iframe cocok dengan hierarki frame ini?document.getElementById('theiframe'))
mengaksesnya. Secara umum browser memungkinkan kedua tampilan pada iframe 'real' (hard-coded), tetapi iframe yang dihasilkan tidak dapat diakses sebagai frame.Atribut NAME
Aturan yang paling penting adalah untuk memberikan iframe apa pun yang Anda buat
name
atribut, bahkan jika Anda juga menggunakanid
.Sebagian besar browser memerlukan
name
atribut untuk membuat bagian iframe dari hirarki frame. Beberapa browser (terutama Mozilla) membutuhkanid
agar iframe dapat diakses sebagai objek. Dengan menetapkan kedua atribut ke iframe Anda membuat opsi Anda tetap terbuka. Tetapiname
jauh lebih penting daripadaid
.Mengakses
Entah Anda mengakses iframe sebagai objek dan mengubahnya
src
atau Anda mengakses iframe sebagai bingkai dan mengubahnyalocation.href
.document.getElementById ('iframe_id'). src = 'newpage.html'; bingkai ['iframe_name']. location.href = 'newpage.html'; Sintaks bingkai sedikit lebih disukai karena Opera 6 mendukungnya tetapi bukan sintaks objek.
Mengakses iframe
Jadi untuk pengalaman lintas-peramban yang lengkap, Anda harus memberi nama iframe dan menggunakannya
sintaksis. Sejauh yang saya tahu ini selalu berhasil.
Mengakses dokumen
Mengakses dokumen di dalam iframe cukup sederhana, asalkan Anda menggunakan
name
atribut tersebut. Untuk menghitung jumlah tautan dalam dokumen di iframe, lakukanframes['testiframe'].document.links.length
.Iframe yang dihasilkan
Ketika Anda menghasilkan iframe melalui DOM W3C , iframe tidak segera dimasukkan ke dalam
frames
array, danframes['testiframe'].location.href
sintaks tidak akan langsung berfungsi. Peramban memerlukan sedikit waktu sebelum iframe muncul dalam array, waktu selama skrip tidak dapat berjalan.Itu
document.getElementById('testiframe').src
sintaks bekerja dengan baik dalam segala situasi.The
target
atribut link tidak bekerja baik dengan iframe dihasilkan, kecuali dalam Opera, meskipun saya memberi saya dihasilkan iframe baikname
danid
.Kurangnya
target
dukungan berarti bahwa Anda harus menggunakan JavaScript untuk mengubah konten iframe yang dihasilkan, tetapi karena Anda tetap membutuhkan JavaScript untuk menghasilkannya, saya tidak melihat ini sebagai masalah.Ukuran teks dalam iframe
Bug hanya Explorer 6 yang penasaran:
Saat Anda mengubah ukuran teks melalui menu Lihat, ukuran teks dalam iframe diubah dengan benar. Namun, peramban ini tidak mengubah jeda baris dalam teks asli, sehingga bagian dari teks dapat menjadi tidak terlihat, atau jeda baris dapat terjadi sementara garis masih dapat menahan kata lain.
sumber
Saya menemukan solusi yang cukup elegan.
Seperti yang Anda katakan, cukup mudah untuk mengeksekusi kode yang terletak pada dokumen induk. Dan itulah basis kode saya, lakukan hal sebaliknya.
Ketika iframe saya dimuat, saya memanggil sebuah fungsi yang terletak di dokumen induk, sebagai argumen sebagai referensi ke fungsi lokal, yang terletak di dokumen iframe. Dokumen induk sekarang memiliki akses langsung ke fungsi iframe melalui referensi ini.
Contoh:
Pada orang tua:
Di iframe:
Ketika iframe dimuat, ia akan memanggil parent.tunnel (YourFunctionReference), yang akan menjalankan fungsi yang diterima dalam parameter.
Sederhana, tanpa harus berurusan dengan semua metode non-standar dari berbagai browser.
sumber
Beberapa jawaban ini tidak membahas masalah CORS, atau tidak membuatnya menjadi jelas di mana Anda menempatkan cuplikan kode untuk memungkinkan komunikasi.
Ini adalah contoh nyata. Katakanlah saya ingin mengklik tombol pada halaman induk, dan minta yang melakukan sesuatu di dalam iframe. Inilah cara saya akan melakukannya.
parent_frame.html
iframe_page.html
Untuk menuju ke arah lain (klik tombol di dalam iframe untuk memanggil metode di luar iframe) cukup alihkan tempat cuplikan kode tinggal, dan ubah ini:
untuk ini:
sumber
Melanjutkan dengan jawaban JoelAnair :
Untuk ketahanan lebih, gunakan sebagai berikut:
Workd like charm :)
sumber
Folowing jawaban Nitin Bansal
dan bahkan lebih kuat:
dan
sumber
sumber
Hal yang sama tetapi cara yang sedikit lebih mudah adalah Bagaimana me-refresh halaman induk dari halaman di dalam iframe . Cukup panggil fungsi halaman induk untuk menjalankan fungsi javascript untuk memuat ulang halaman:
Atau lakukan ini langsung dari halaman di iframe:
Keduanya bekerja.
sumber
Coba saja
parent.myfunction()
sumber
Jika Anda ingin menjalankan fungsi JavaScript pada Induk dari iframe yang dihasilkan oleh fungsi lain, ex shadowbox atau lightbox.
Anda harus mencoba memanfaatkan
window
objek dan menjalankan fungsi induk:sumber
Gunakan fungsi berikut untuk memanggil bingkai di halaman induk
sumber