Rumah >hujung hadapan web >tutorial js >Penjelasan terperinci tentang kaedah biasa untuk jQuery untuk mendapatkan elemen dalam iframe_jquery

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

WBOYasal: 2016-05-16 15:19:461292semak imbas

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

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>

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>

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.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Capai kemahiran jquery akordion effect_javascript dengan mudahArtikel seterusnya：Capai kemahiran jquery akordion effect_javascript dengan mudah

Artikel berkaitan

Lihat lagi