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.

javascript iframe getelementbyid

— cycero
sumber

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.

— Darin Dimitrov
sumber

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

— Kevin Bowersox
sumber

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

— Tarif Alnamrouti
sumber

-3

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

— tibersky
sumber

-9

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

$("#containerdiv div").draggable( {containment: "#containerdiv ", scroll: false} );

— Rajasekharreddy Kadasani
sumber