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:

//Lapisan topeng

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

//iframe tetingkap untuk dibenamkan

Kod JavaScript:

$(fungsi ( ){

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

});

Di atas adalah contoh kod mudah untuk menggunakan jQuery untuk menutup tetingkap iframe Melalui contoh kod di atas, kita dapat melihat bahawa apabila menutup Dalam proses mencipta tetingkap iframe, jQuery boleh membantu kami melaksanakan fungsi ini dengan cepat dan mudah.

Kesimpulan

Dengan perkembangan berterusan teknologi Internet, kesan tetingkap timbul telah menjadi teknologi penting dalam pembangunan tapak web moden, dan dalam kesan tetingkap timbul, penggunaan tetingkap iframe adalah juga sangat biasa Kaedah pelaksanaan teknikal. Melalui pengenalan artikel ini, kita dapat melihat bahawa dalam proses menggunakan jQuery untuk menutup tetingkap iframe, anda hanya perlu mendapatkan objek iframe dan objek induk, dan memanggil kaedah remove() dan fadeOut() jQuery untuk mencapai fungsi ini. . Disebabkan oleh had ruang, artikel ini hanya memperkenalkan kaedah pelaksanaan kod asas Dalam aplikasi sebenar, penyelidikan dan pelarasan mendalam diperlukan untuk situasi tertentu.

Atas ialah kandungan terperinci Bagaimana untuk menutup tetingkap iframe dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!