Memilih elemen di iFrame jQuery


122

Dalam aplikasi kami, kami mengurai halaman web dan memuatnya ke halaman lain di iFrame. Semua elemen di halaman yang dimuat itu memiliki tokenid-s. Saya perlu memilih elemen dengan tokenid-s tersebut. Berarti - Saya mengklik elemen di halaman utama dan memilih elemen yang sesuai di halaman di iFrame. Dengan bantuan jQuery, saya melakukannya dengan cara berikut:

function selectElement(token) {
     $('[tokenid=' + token + ']').addClass('border'); 
}

Namun dengan fungsi ini saya dapat memilih elemen di halaman saat ini saja, bukan di iFrame. Adakah yang bisa memberi tahu saya bagaimana cara memilih elemen di iFrame yang dimuat?

Terima kasih.

Jawaban:


157
var iframe = $('iframe'); // or some other selector to get the iframe
$('[tokenid=' + token + ']', iframe.contents()).addClass('border');

Perhatikan juga bahwa jika srciframe ini mengarah ke domain yang berbeda, karena alasan keamanan, Anda tidak akan dapat mengakses konten iframe ini dalam javascript.


8
Perlu diingat bahwa $ ('iframe') tidak mengembalikan iframe secara langsung. Anda perlu menariknya keluar dari array.
McKayla

Terima kasih atas kesediaannya untuk membantu. Tapi ini sepertinya tidak berhasil.
cycero

3
@ Cycero, seharusnya berfungsi. Apakah Anda membuat iframe ini secara dinamis? Jangan lupa bahwa jika Anda mengarahkan elemen src dari iframe ini ke domain lain selain Anda karena alasan keamanan, Anda tidak dapat mengakses isinya.
Darin Dimitrov

Saya memuatnya bukan dari domain yang berbeda tetapi dari folder yang sama. Konten iFrame dibuat secara dinamis dan disimpan sebagai file di server. Kemudian file itu dimuat di iFrame.
cycero

@cycero, saya telah memperbarui jawaban saya. Cobalah melewatiiframe.contents()
Darin Dimitrov

52

Lihatlah posting ini: http://praveenbattula.blogspot.com/2009/09/access-iframe-content-using-jquery.html

$("#iframeID").contents().find("[tokenid=" + token + "]").html();

Tempatkan pemilih Anda di metode temukan.

Namun ini mungkin tidak dapat dilakukan jika iframe tidak berasal dari server Anda. Posting lain berbicara tentang kesalahan izin ditolak.

jQuery / JavaScript: mengakses konten iframe


Itu berfungsi dalam hal mendapatkan HTML elemen, tetapi bagaimana saya bisa menambahkan kelas CSS ke elemen yang dipilih? $ ("# iframeDiv"). content (). find ("[tokenid =" + token + "]"). addClass ("border"); sepertinya tidak berhasil.
cycero

1
Apakah Anda mendapatkan kesalahan izin ditolak? Bisakah Anda memberi saya html iframe?
Kevin Bowersox

Tidak, tidak ada masalah yang ditolak izinnya.
cycero

20

ketika dokumen Anda sudah siap, itu tidak berarti iframe Anda juga siap,
jadi Anda harus mendengarkan acara pemuatan iframe lalu mengakses konten Anda:

$(function() {
    $("#my-iframe").bind("load",function(){
        $(this).contents().find("[tokenid=" + token + "]").html();
    });
});

-3

Jika kasus mengakses IFrame melalui konsol, misalnya Chrome Dev Tools maka Anda tinggal memilih konteks permintaan DOM melalui dropdown (lihat gambar).

Alat Pengembang Chrome - Memilih iFrame


-9

berikut ini JQuery sederhana untuk melakukan ini agar div dapat diseret dengan hanya dalam wadah:

$("#containerdiv div").draggable( {containment: "#containerdiv ", scroll: false} );
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.