Bagaimana untuk menutup tetingkap iframe dalam jquery

Dengan perkembangan teknologi Internet yang berterusan, fungsi tapak web menjadi lebih banyak dan terdapat lebih banyak kesan dinamik. Antaranya, tetingkap pop timbul adalah kesan yang sering digunakan pada tapak web moden, yang boleh memberikan pengguna pengalaman pengendalian yang lebih mudah. Dalam proses merealisasikan kesan pop timbul, tetingkap iframe adalah cara teknikal yang sangat penting. Walau bagaimanapun, cara menutup tetingkap iframe juga merupakan isu yang sangat penting semasa penggunaan tetingkap pop timbul. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk menutup tetingkap iframe.

1. Apakah itu tetingkap iframe?

tetingkap iframe ialah bingkai sebaris dalam HTML dan teknologi pembangunan web yang sangat biasa. Ia boleh membenamkan halaman web lain dalam halaman web untuk mencapai sarang halaman. Biasanya, tetingkap iframe digunakan untuk membenamkan kandungan tapak web pihak ketiga, atau untuk memuatkan bahagian tertentu halaman web secara berasingan untuk melaksanakan fungsi tertentu. Contohnya, benamkan peta dalam halaman web, atau benamkan pemain video dalam halaman, dsb.

2. Bagaimana hendak menutup tetingkap iframe?

Sebenarnya, sangat mudah untuk menutup tetingkap iframe dalam HTML Anda hanya perlu membenamkan butang tutup dalam iframe dan memanggil kaedah untuk menutup tetingkap iframe dalam acara klik butang. Walau bagaimanapun, apabila menggunakan rangka kerja jQuery untuk menutup tetingkap iframe, anda perlu mengambil kira aspek berikut:

1. Dapatkan objek iframe

Dalam proses menggunakan jQuery untuk menutup tetingkap iframe. Dalam, pertama anda perlu mendapatkan objek iframe. Ia boleh diperolehi melalui kod berikut:

var iframe = parent.document.getElementById("iframeId"); // iframeId ialah id iframe

2 objek

Begitu juga, dalam proses menutup tetingkap iframe, anda perlu mendapatkan objek induknya. Ia boleh diperolehi melalui kod berikut:

var parentWindow = window.parent;

3 Tutup tetingkap iframe

Selepas mendapatkan objek iframe dan objek induk, langkah seterusnya ialah Gunakan jQuery untuk menutup tetingkap iframe. Khususnya, anda boleh memanggil kod berikut semasa klik butang tutup:

$(iframe).remove();//Tutup tetingkap iframe
$(parentWindow).find('# tindanan ').fadeOut();//Tutup lapisan topeng

Dalam kod di atas, pernyataan pertama digunakan untuk menutup tetingkap iframe dan mengalih keluar elemen iframe dengan memanggil kaedah remove() jQuery. Pernyataan kedua digunakan untuk menutup lapisan topeng Ia juga menggunakan kaedah find() jQuery untuk mencari elemen lapisan topeng dan memanggil kaedah fadeOut() untuk menutupnya.

3. Contoh Kod

Contoh kod lengkap diberikan di bawah untuk menunjukkan cara menggunakan jQuery untuk menutup tetingkap iframe.

Kod HTML:

<div id="popup-wrapper">//弹窗页面
    <h2>弹窗标题</h2>
    <p>弹窗内容</p>
    <button id="closeBtn">关闭窗口</button>
</div>

$("#closeBtn").click(function(){
    var iframe = parent.document.getElementById("iframeId");//获取iframe对象
    var parentWindow = window.parent;//获取iframe父级对象
    $(iframe).remove();//关闭iframe窗口
    $(parentWindow).find('#overlay').fadeOut();//关闭遮罩层
});