Dapatkan elemen dari dalam iFrame


Jawaban:


382
var iframe = document.getElementById('iframeId');
var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;

Anda bisa menulis:

var iframe = document.getElementById('iframeId');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;

dan dokumen internal yang valid pertama akan dikembalikan.

Setelah Anda mendapatkan dokumen internal, Anda bisa mengakses internalnya dengan cara yang sama seperti Anda mengakses elemen apa pun di halaman Anda saat ini. ( innerDoc.getElementById... dll.)

PENTING: Pastikan iframe berada di domain yang sama, jika tidak, Anda tidak dapat mengakses internalnya. Itu akan menjadi skrip lintas situs.


4
Jawaban yang bagus Tahukah Anda bahwa Anda dapat melakukannya: var innerDoc = iframe.contentDocument || iframe.contentWindow.document; // lebih mudah dibaca dan artinya sama
David Snabel-Caunt

5
Saya telah melihat orang-orang bingung oleh lebih dari operator ternary. Mereka tampaknya tidak tahu bahwa yang valid pertama dikembalikan.
geowa4

5
sebenarnya, ketika saya mengedit jawaban untuk memasukkannya, pria di atas bahu saya bertanya kepada saya apa yang ...
geowa4

12
Mungkin lebih baik untuk mendidik daripada penggunaan kode yang lebih kompleks untuk kesederhanaan :)
David Snabel-Caunt

1
@JellicleCat: Cara apa pun untuk melakukan "pemalsuan permintaan lintas situs", juga dikenal sebagai serangan "satu-klik" atau "sesi berkendara"
CSharper

12

Jangan lupa untuk mengakses iframe setelah dimuat . Cara lama tapi andal tanpa jQuery:

<iframe src="samedomain.com/page.htm" id="iframe" onload="access()"></iframe>

<script>
function access() {
   var iframe = document.getElementById("iframe");
   var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
   console.log(innerDoc.body);
}
</script>

3
window.parent.document.getElementById("framekit").contentWindow.CallYourFunction('pass your value')

CallYourFunction() adalah fungsi di dalam halaman dan fungsi tindakan di atasnya


5
Itu memanggil fungsi dari iFrame, tidak mendapatkan referensi ke elemen.
Nick Mitchell

3

Jawaban di atas memberikan solusi yang baik menggunakan Javscript. Berikut ini adalah solusi jQuery sederhana:

$('#iframeId').contents().find('div')

Kuncinya di sini adalah .contents()metode jQuery , tidak seperti .children()yang hanya bisa mendapatkan elemen HTML, .contents()bisa mendapatkan node teks dan elemen HTML. Itu sebabnya orang bisa mendapatkan konten dokumen iframe dengan menggunakannya.

Bacaan lebih lanjut tentang jQuery .contents(): .contents ()

Perhatikan bahwa iframe dan halaman harus berada di domain yang sama.


1

Tidak ada jawaban lain yang bekerja untuk saya. Saya akhirnya membuat fungsi di dalam iframe saya yang mengembalikan objek yang saya cari:

function getElementWithinIframe() {
    return document.getElementById('copy-sheet-form');
}

Kemudian Anda memanggil fungsi seperti itu untuk mengambil elemen:

var el = document.getElementById("iframeId").contentWindow.functionNameToCall();

0

Jika iframe tidak berada dalam domain yang sama sehingga Anda tidak bisa mendapatkan akses ke internalnya dari induk tetapi Anda dapat memodifikasi kode sumber iframe maka Anda dapat memodifikasi halaman yang ditampilkan oleh iframe untuk mengirim pesan ke jendela induk, yang memungkinkan Anda berbagi informasi antar halaman. Beberapa sumber:


-3

Kode di bawah ini akan membantu Anda mengetahui data iframe.

let iframe = document.getElementById('frameId');
let innerDoc = iframe.contentDocument || iframe.contentWindow.document;
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.