Penjelasan terperinci tentang kaedah biasa untuk jQuery untuk mendapatkan elemen dalam iframe

Penjelasan terperinci tentang kaedah biasa untuk jQuery untuk mendapatkan elemen dalam iframe_jquery

WBOY

Lepaskan： 2016-05-16 15:19:46

asal

1320 orang telah melayarinya

Artikel ini menganalisis kaedah biasa jQuery untuk mendapatkan elemen dalam iframe. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Beberapa cara untuk mendapatkan elemen dalam iframe dengan jquery:

Dapatkan elemen halaman induk dalam subhalaman iframe

Kod adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

$('#objId', parent.document);

Selesai...

Dapatkan elemen subhalaman iframe pada halaman induk:

$("#objid",document.frames('iframename').document)
$(document.getElementById('iframeId').contentWindow.document.body).html()

Salin selepas log masuk

Paparkan kandungan elemen badan dalam iframe.

Salin kod Kod adalah seperti berikut:

$("#testId", document.frames("iframename") .document) .html();

Dapatkan elemen yang IDnya ialah "testId" berdasarkan iframename

Salin kod Kod adalah seperti berikut:

$(window.frames["iframeName"].document).cari ("# testId").html()

Gunakan JS atau jQuery untuk mengakses iframe dalam halaman, serasi dengan IE/FF

Nota: Halaman dalam bingkai tidak boleh merentas domain!

Andaikan terdapat dua halaman, di bawah domain yang sama.

Fail

index.html mengandungi iframe:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>页面首页</title>
</head>
<body>
<iframe src="iframe.html" id="koyoz" height="0" width="0"></iframe>
</body>
</html>

Salin selepas log masuk

kandungan iframe.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>iframe.html</title>
</head>
<body>
<div id="test">www.jb51.net</div>
</body>
</html>

Salin selepas log masuk

1. Laksanakan JS dalam index.html untuk akses terus:

Salin kod Kod adalah seperti berikut:

document.getElementById('koyoz').contentWindow.document .getElementById( 'test').style.color='red'

Akses halaman iframe dengan nama ID 'koyoz' dalam index.html, dapatkan objek dengan nama ID 'test' dalam halaman iframe ini dan tetapkan warnanya kepada merah

Kod ini telah diuji dan boleh menyokong IE/firefox.

2. Akses dengan jQuery dalam index.html:

Salin kod Kod adalah seperti berikut:

$("#koyoz").contents().find(" #test" ).css('color','red');

Kesan kod ini adalah sama seperti akses terus melalui JS Dengan bantuan rangka kerja jQuery, kod itu lebih pendek.

Kumpulkan beberapa contoh daripada Internet:

Menggunakan jQuery untuk mendapatkan nilai elemen tetingkap induk dalam IFRAME hanya boleh dicapai dengan menggabungkan kaedah DOM dan kaedah jquery

1. Beroperasi dalam tetingkap induk dan pilih semua butang radio dalam IFRAME

Salin kod Kod adalah seperti berikut:

$(window.frames["iframe1"].document).cari ("input :radio").attr("checked","true");

2. Beroperasi dalam IFRAME dan pilih semua butang radio dalam tetingkap induk

Salin kod Kod adalah seperti berikut:

$(window.parent.document).find("input:radio "). attr("ditandai","benar");

Jika tetingkap induk ingin mendapatkan Iframe dalam IFrame, cuma tambahkan anak bingkai, seperti:

Salin kod Kod adalah seperti berikut:

$(window.frames["iframe1"].frames["iframe2 "]. document).find("input:radio").attr("checked","true");

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.