Dapatkan elemen dari dalam iFrame

Bagaimana Anda mendapatkan <div>dari dalam <iframe>?

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.

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>

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

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

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.

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();

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:

• https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
• Html5 - Cross postmessage Browser Iframe - anak ke orang tua?
• lintas situs iframe postMessage dari anak ke orang tua

Kode di bawah ini akan membantu Anda mengetahui data iframe.

let iframe = document.getElementById('frameId');
let innerDoc = iframe.contentDocument || iframe.contentWindow.document;