Bagaimana cara mendapatkan konten tubuh iframe di Javascript?

154

<iframe id="id_description_iframe" class="rte-zone" height="200" frameborder="0" title="description">
  <html>
    <head></head>
    <body class="frameBody">
      test<br/>
    </body>
  </html>
</iframe>

Yang ingin saya dapatkan adalah:

test<br/>

javascript html iframe

— Oh Tuhan
sumber

52

Catatan penting: Anda tidak dapat mengakses konten iFrame jika itu lintas domain. Lihat kebijakan Asal-Sama .

— HellaMad

154

Pertanyaan yang tepat adalah bagaimana melakukannya dengan JavaScript murni bukan dengan jQuery.

Tapi saya selalu menggunakan solusi yang dapat ditemukan dalam kode sumber jQuery. Itu hanya satu baris JavaScript asli.

Bagi saya itu yang terbaik, mudah dibaca dan bahkan afaik cara terpendek untuk mendapatkan konten iframe.

Pertama, dapatkan iframe Anda

var iframe = document.getElementById('id_description_iframe');

// or
var iframe = document.querySelector('#id_description_iframe');

Dan kemudian gunakan solusi jQuery

var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

Ia bekerja bahkan di Internet Explorer yang melakukan trik ini selama contentWindowproperti iframeobjek. Sebagian besar browser lain menggunakan contentDocumentproperti dan itulah alasan mengapa kami membuktikan properti ini terlebih dahulu dalam kondisi ATAU ini. Jika tidak diatur coba contentWindow.document.

Pilih elemen dalam iframe

Maka Anda biasanya dapat menggunakan getElementById()atau bahkan querySelectorAll()untuk memilih DOM-Element dari iframeDocument:

if (!iframeDocument) {
    throw "iframe couldn't be found in DOM.";
}

var iframeContent = iframeDocument.getElementById('frameBody');

// or
var iframeContent = iframeDocument.querySelectorAll('#frameBody');

Fungsi panggilan di iframe

Dapatkan windowelemen dari iframeuntuk memanggil beberapa fungsi global, variabel, atau seluruh perpustakaan (mis. jQuery):

var iframeWindow = iframe.contentWindow;

// you can even call jQuery or other frameworks
// if it is loaded inside the iframe
iframeContent = iframeWindow.jQuery('#frameBody');

// or
iframeContent = iframeWindow.$('#frameBody');

// or even use any other global variable
iframeWindow.myVar = window.myVar;

// or call a global function
var myVar = iframeWindow.myFunction(param1 /*, ... */);

Catatan

Semua ini dimungkinkan jika Anda memperhatikan kebijakan asal-sama .

— algoritme
sumber

2

iframe tidak didefinisikan di sini, Anda harus menulis kode lengkap atau tidak menulis jQuery dengannya

— Tarun Gupta

13

tolong permisi, tetapi baris kode adalah kutipan dari kode jquery dan blok kode adalah contoh kode saya sendiri. Sisanya harus ada yang mengeluarkan dirinya. satu-satunya hal yang Anda lewatkan adalah variabel iframe. Dan saya tidak mungkin tahu di mana iframe Anda atau bagaimana ID-nya.

— algorhythm

5

Bisakah Anda menambahkan peringatan ke bagian atas jawaban bahwa ini tidak berfungsi jika iframe memiliki src jarak jauh? Jika saya salah, saya akan menghargai jika Anda bisa mengarahkan saya ke bagaimana saya masih bisa mendapatkan konten iframe tanpa mengirim permintaan HTTP lain (tidak mungkin karena saya perlu javascript dieksekusi untuk membangun konten iframe dan tidak ingin menggunakan lingkungan javascript kedua jika dapat dihindari).

— Zackline

1

Saya punya peringatan seperti itu. Namun di akhir penjelasan saya. Anda harus mematuhi kebijakan asal yang sama. Itu saja.

— Algoritme

2

Untuk mendapatkan yang di atas berfungsi, saya harus melampirkannya di document.querySelector('#id_description_iframe').onload = function() {... Semoga membantu seseorang.

— user3442612

71

Menggunakan JQuery, coba ini:

$("#id_description_iframe").contents().find("body").html()

— Michael Adedayo
sumber

27

Itu tidak berfungsi karena "Domain, protokol, dan port harus cocok." : Upaya JavaScript yang tidak aman untuk mengakses bingkai dengan URL

— Ionică Bizău

2

Seperti disebutkan, itu akan berfungsi jika domain cocok. FYI, saya baru saja menemukan bahwa $ ("# id_description_iframe #id_of_iframe_body"). Html () berfungsi di Chrome tetapi tidak di semua versi firefox, dan karenanya menggunakan di atas tidak masalah. Yaitu $ ("# id_description_iframe #id_of_iframe_body"). Content (). Find ("body"). Html () berhasil di keduanya

— hobailey

41

ini bekerja dengan baik untuk saya:

document.getElementById('iframe_id').contentWindow.document.body.innerHTML;

— bizzr3
sumber

3

Ini aneh, tetapi bagi saya .bodytidak berhasil. Namun .getElementsByTagName('body')[0]demikian.

— Jenny O'Reilly

itu bukan ".body", hanya "tubuh". hapus titik

— Arjun

1

ini harus menjadi jawaban jika Anda menggunakan javascript vanilla.

— Jovanni G

23

AFAIK, Iframe tidak dapat digunakan dengan cara itu. Anda perlu mengarahkan atribut src ke halaman lain.

Berikut ini cara mendapatkan konten tubuhnya menggunakan javascript lama pesawat. Ini bekerja dengan IE dan Firefox.

function getFrameContents(){
   var iFrame =  document.getElementById('id_description_iframe');
   var iFrameBody;
   if ( iFrame.contentDocument ) 
   { // FF
     iFrameBody = iFrame.contentDocument.getElementsByTagName('body')[0];
   }
   else if ( iFrame.contentWindow ) 
   { // IE
     iFrameBody = iFrame.contentWindow.document.getElementsByTagName('body')[0];
   }
    alert(iFrameBody.innerHTML);
 }

— Jose Basilio
sumber

1

tidak pada safari (yaitu cabang)

— Andrei Cristian Prodan

memiliki masalah lintas domain, Memblokir bingkai dengan asal " someOther.com " dari mengakses bingkai lintas asal.

— lannyf

10

gunakan contentdi iframe dengan JS:

document.getElementById('id_iframe').contentWindow.document.write('content');

— KursusWeb
sumber

5

Saya pikir menempatkan teks di antara tag dicadangkan untuk browser yang tidak bisa menangani iframe yaitu ..

<iframe src ="html_intro.asp" width="100%" height="300">
  <p>Your browser does not support iframes.</p>
</iframe>

Anda menggunakan atribut 'src' untuk mengatur sumber hr iframes ...

Semoga itu bisa membantu :)

3

Kode berikut sesuai dengan lintas-browser. Ia bekerja di IE7, IE8, Fx 3, Safari, dan Chrome, jadi tidak perlu menangani masalah lintas-browser. Tidak menguji di IE6.

<iframe id="iframeId" name="iframeId">...</iframe>

<script type="text/javascript">
    var iframeDoc;
    if (window.frames && window.frames.iframeId &&
        (iframeDoc = window.frames.iframeId.document)) {
        var iframeBody = iframeDoc.body;
        var ifromContent = iframeBody.innerHTML;
    }
</script>

— nekno
sumber

Html di bawah ini berfungsi untuk saya di Chrome 7 di Mac. Saya menguji pos asli ini di Chrome 6 pada Windows dan itu berfungsi dengan baik. <html> <head> </head> <body> <iframe id = "iframeId" name = "iframeId"> ... </iframe> <script type = "text / javascript"> var iframeDoc; if (window.frames && window.frames.iframeId && window.frames.iframeId.document) {window.frames.iframeId.document.body.innerHTML = "<h1> testing </h1>"; } </script> </body> </html>

— nekno

1

window.frames.iframeId.documenttidak terdefinisi untuk saya. (Ubuntu 13.04, Chrome)

— Ionică Bizău

2

Chalkey benar, Anda perlu menggunakan atribut src untuk menentukan halaman yang akan terkandung dalam iframe. Jika Anda melakukan ini, dan dokumen di iframe berada di domain yang sama dengan dokumen induk, Anda dapat menggunakan ini:

var e = document.getElementById("id_description_iframe");
if(e != null) {
   alert(e.contentWindow.document.body.innerHTML);
}

Jelas Anda kemudian dapat melakukan sesuatu yang berguna dengan konten daripada hanya menempatkannya dalam peringatan.

— Graham Clark
sumber

1

Untuk mendapatkan konten tubuh dari javascript, saya telah mencoba kode berikut:

var frameObj = document.getElementById('id_description_iframe');

var frameContent = frameObj.contentWindow.document.body.innerHTML;

dengan "id_description_iframe" adalah id iframe Anda. Kode ini berfungsi dengan baik untuk saya.

— sunakshi
sumber

2

Harap berikan jawaban Anda selalu dalam konteks alih-alih hanya menempelkan kode. Lihat di sini untuk detail lebih lanjut.

— gehbiszumeis

1

Jawaban khusus kode dianggap berkualitas rendah: pastikan untuk memberikan penjelasan apa yang kode Anda lakukan dan bagaimana cara memecahkan masalah. Ini akan membantu penanya dan pembaca di masa mendatang jika Anda dapat menambahkan lebih banyak informasi dalam posting Anda. Lihat juga Menjelaskan sepenuhnya jawaban berbasis kode: meta.stackexchange.com/questions/114762/…

— borchvm