Bagaimana cara mengakses konten iframe dengan jQuery?

116

Bagaimana saya bisa mengakses konten iframe dengan jQuery? Saya mencoba melakukan ini, tetapi tidak berhasil:

konten iframe: <div id="myContent"></div>

jQuery: $("#myiframe").find("#myContent")

Bagaimana saya bisa mengakses myContent?

Mirip dengan jquery / javascript: mengakses konten iframe tetapi jawaban yang diterima bukanlah yang saya cari.

jquery iframe mbillard.dll
sumber
Saya baru saja menemukan bahwa variabel $ built-in di konsol Firefox tidak terlihat seperti jQuery lengkap sama sekali. (Saya menemukan ini setelah menyadari bahwa saya juga tidak memiliki variabel jQuery, kemudian mengetahui bahwa saya tidak memuat kode sumber jQuery).
belut ghEEz

Jawaban:

214

Anda harus menggunakan contents()metode ini:

$("#myiframe").contents().find("#myContent")

Sumber: http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/

Dokumen API: https://api.jquery.com/contents/

mbillard.dll
sumber
3
beri saya kesalahan: Kesalahan: Izin ditolak untuk mengakses properti 'ownerDocument'
Imran Khan
26
ime: Ini mungkin memberi Anda kesalahan karena alasan berikut: 1) Iframe bukan milik domain yang sama. 2) Anda mencoba membacanya sebelum acara pemuatan Iframe.
iMatoria
1
Adakah cara untuk memverifikasi jika konten iframe berasal dari domain yang sama, sebelum mencoba mengaksesnya dan mendapatkan kesalahan?
Kamafeather
2
Url sumber rusak.
karthzDIGI
1
@jperezmartin: Anda harus menggunakan beberapa perpustakaan javascript yang akan mentransfer informasi antara halaman utama dan iframe. Pada dasarnya ini ditolak oleh browser karena fungsionalitas Cross Browser. Saya minta maaf, saya tidak mengetahui adanya perpustakaan semacam itu karena saya tidak pernah membutuhkannya.
iMatoria
21 
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">

$(function() {

    //here you have the control over the body of the iframe document
    var iBody = $("#iView").contents().find("body");

    //here you have the control over any element (#myContent)
    var myContent = iBody.find("#myContent");

});

</script>
</head>
<body>
  <iframe src="mifile.html" id="iView" style="width:200px;height:70px;border:dotted 1px red" frameborder="0"></iframe>
</body>
</html>
andres descalzo
sumber
15

Jika sumber iframe adalah domain eksternal, browser akan menyembunyikan konten iframe (Kebijakan Asal Sama). Solusinya adalah menyimpan konten eksternal dalam file, misalnya (dalam PHP):

<?php
    $contents = file_get_contents($external_url);
    $res = file_put_contents($filename, $contents);
?>

kemudian, dapatkan konten file baru (string) dan parsing ke html, misalnya (di jquery):

$.get(file_url, function(string){
    var html = $.parseHTML(string);
    var contents = $(html).contents();
},'html');
fireb86
sumber