butang tutup javascript

Aplikasi butang tutup JavaScript dan pelaksanaannya

Dalam reka bentuk web, kadangkala kita perlu menambah butang tutup dalam tetingkap pop timbul atau kotak modal supaya pengguna boleh menutup tetingkap pada bila-bila masa. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan fungsi butang tutup.

1. Gunakan kod HTML untuk membuat butang tutup

Dalam kod HTML, kita boleh menggunakan tag <button> untuk membuat butang tutup, kodnya adalah seperti berikut:

<button onclick="closeWindow()">关闭窗口</button>

di mana, Atribut onclick mencetuskan fungsi apabila butang diklik. Kita perlu mentakrifkan fungsi closeWindow() dalam JavaScript untuk melaksanakan fungsi menutup tetingkap.

2. Gunakan objek Window untuk menutup tetingkap

Dalam JavaScript, kita boleh menggunakan objek Window untuk menutup tetingkap semasa atau tetingkap anak yang terbuka. Berikut ialah dua kaedah pelaksanaan:

1. Gunakan kaedah window.close() untuk menutup tetingkap semasa:

function closeWindow() {
    window.close();
}

Nota: Kaedah window.close() hanya boleh menutup tetingkap yang dibuka oleh JavaScript. Kaedah ini tidak akan berfungsi jika tetingkap semasa dibuka oleh pengguna.

2. Gunakan atribut window.opener untuk menutup tetingkap induk atau tetingkap anak terbuka:

function closeWindow() {
    window.opener=null;
    window.open('','_self');
    window.close();
}

Dalam contoh ini, kami mula-mula menetapkan window.opener kepada null , untuk memastikan bahawa tetingkap yang tertutup tidak akan membuka tetingkap induknya semula secara automatik. Kemudian kami menggunakan kaedah window.open() untuk membuka tetingkap kosong Parameter pertama kaedah ini ialah URL yang akan dibuka Memandangkan kami tidak perlu membuka sebarang URL, rentetan kosong dimasukkan. Parameter kedua ialah nama tetingkap, _self digunakan di sini, yang bermaksud membuka halaman web baharu dalam tetingkap semasa. Akhirnya kami menggunakan kaedah window.close() untuk menutup tetingkap semasa.

3. Laksanakan butang tutup dalam jQuery

Jika kami menggunakan jQuery untuk menulis kod JavaScript, kami boleh menggunakan dua kaedah berikut untuk melaksanakan fungsi butang tutup:

1. Gunakan kaedah window.close() untuk menutup tetingkap semasa (sama seperti di atas):

function closeWindow() {
    window.close();
}

2. Simulasikan acara penutupan tetingkap dalam jQuery:

function closeWindow() {
    var windowEvent = jQuery.Event('beforeunload');
    $(window).trigger(windowEvent);

    if (!windowEvent.isDefaultPrevented()) {
        window.close();
    }
}

Dalam contoh ini, Kami mula-mula mentakrifkan acara tutup tetingkap simulasi. Kemudian gunakan kaedah trigger() jQuery untuk mencetuskan acara, yang akan melaksanakan semua pengendali yang didaftarkan untuk acara tersebut. Jika pengendali tidak mempunyai tingkah laku lalai untuk menyekat acara, kaedah window.close() akan dilaksanakan untuk menutup tetingkap semasa.

Ringkasan:

Artikel ini memperkenalkan cara melaksanakan butang tutup dalam JavaScript dan jQuery. Sama ada anda menutup tetingkap melalui kaedah window.close() atau mensimulasikan acara penutupan tetingkap, ingatlah untuk mentakrifkan dengan jelas tingkah laku penutupan anda dalam kod anda dan maklumkan kepada pengguna mengenainya.

Atas ialah kandungan terperinci butang tutup javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!