JavaScript menutup halaman

JavaScript ialah bahasa pengaturcaraan yang digunakan secara meluas yang sering digunakan untuk pembangunan laman web dan skrip sebelah penyemak imbas. Selain menambahkan animasi yang cantik dan kesan interaktif pada tapak web, JavaScript juga boleh membantu kami melaksanakan fungsi yang lebih berguna, seperti melakukan tindakan tertentu apabila halaman ditutup.

Dalam artikel ini, kita akan melihat beberapa cara untuk menggunakan JavaScript untuk menutup halaman web dan melakukan tindakan khusus apabila ia ditutup. Kami juga akan memperkenalkan kaedah berbeza yang boleh digunakan untuk tujuan ini dan membincangkan kelebihan dan kekurangan setiap kaedah.

Kaedah 1: Gunakan window.close

Untuk menyelesaikan tugasan ini, kita boleh menggunakan fungsi window.close dalam JavaScript. Fungsi ini menutup tetingkap penyemak imbas semasa, tetapi dalam sesetengah penyemak imbas anda perlu membuka tetingkap terlebih dahulu sebelum anda boleh menutupnya.

Sebagai contoh, dalam kod di bawah, kami mencipta tetingkap baharu dan kemudian memanggil fungsi window.close dalam tetingkap itu untuk memaparkan mesej sebelum ditutup.

let myWindow = window.open("", "myWindow", "width=200,height=100");
myWindow.document.write("<p>This is my window!</p>");
myWindow.close();

Dalam contoh di atas, kami mula-mula mencipta tetingkap baharu menggunakan fungsi window.open dan namakannya "myWindow". Kami kemudian menulis mesej ke tetingkap dan seterusnya menutup tetingkap.

Kelebihan utama kaedah ini ialah ia sangat ringkas dan mudah difahami, serta sesuai untuk senario mudah di mana halaman web perlu ditutup. Walau bagaimanapun, ia tidak memaparkan mesej sebelum menutup tetingkap, kerana apabila tetingkap ditutup, halaman ditutup serta-merta tanpa peluang untuk memaparkan mesej.

Kaedah 2: Gunakan window.addEventListener

Cara lain untuk menutup halaman web dan melakukan beberapa operasi semasa menutup ialah menggunakan fungsi window.addEventListener. Fungsi ini membolehkan kami melaksanakan beberapa kod tersuai sebelum tetingkap ditutup.

Untuk menggunakan fungsi window.addEventListener kita boleh menggunakan kod berikut:

window.addEventListener("beforeunload", function(event) {
  event.preventDefault();
  console.log("Are you sure you want to leave?");
  return event.returnValue = '';
});

Dalam kod di atas kita menambah pendengar acara pada tetingkap yang akan digunakan apabila penyemak imbas menutup ia dijalankan sebelum . Pendengar acara ini mengambil fungsi sebagai parameter dan melaksanakan sebarang kod tersuai yang kami perlukan dalam fungsi itu. Dalam contoh di atas, fungsi mencetak beberapa mesej teks dan menghalang tetingkap daripada ditutup.

Kelebihan menggunakan kaedah window.addEventListener ialah ia boleh melaksanakan kod tersuai sewenang-wenangnya sebelum menutup tetingkap, seperti menyimpan sebarang data untuk membuka fail atau melaksanakan operasi simpan. Ia juga boleh digunakan bersama dengan pendengar acara lain, seperti peristiwa yang akan berlaku apabila halaman dimuatkan.

Kaedah 3: Gunakan kotak dialog Sahkan

Kotak dialog Sahkan ialah komponen JavaScript yang sangat biasa digunakan untuk bertanya kepada pengguna jika mereka bersedia melakukan operasi tertentu. Menggunakan kotak dialog Sahkan membolehkan kami menggesa pengguna sama ada mereka benar-benar mahu keluar semasa menutup halaman web.

Anda boleh menggunakan kod berikut untuk memaparkan mesej pengesahan semasa menutup halaman web:

window.onbeforeunload = function() {
  return "Are you sure you want to leave?";
}

Dalam contoh ini, kami menambah pendengar acara onbeforeunload yang mengandungi mesej pengesahan yang dikembalikan. Apabila pengguna cuba menutup halaman web, penyemak imbas memaparkan kotak dialog Sahkan untuk membenarkan pengguna menentukan sama ada mereka mahu meneruskan.

Kelebihan menggunakan kaedah di atas ialah ia boleh mencipta kotak dialog sebelum menutup tetingkap, sekali gus meningkatkan pengalaman pengguna. Walau bagaimanapun, sesetengah pengguna mungkin tidak memahami kotak dialog Sahkan ini, yang boleh menyebabkan mereka menutupnya dengan sengaja, dengan itu menutup keseluruhan tetingkap tapak web secara tidak sengaja.

Kesimpulan

Ringkasnya, kami mempunyai beberapa cara untuk menutup halaman menggunakan JavaScript dan melakukan tindakan pada penutupan. Setiap kaedah mempunyai kelebihan dan kekurangannya, bergantung pada jenis operasi yang ingin anda lakukan dan pengalaman pengguna.

Untuk senario mudah yang tidak memerlukan maklumat lain untuk dipaparkan sebelum menutup tetingkap, menggunakan kaedah window.close adalah pendekatan yang sangat mudah. Untuk situasi di mana anda perlu melaksanakan kod tersuai sebelum menutup atau bersama dengan acara lain, window.addEventListener ialah pilihan yang lebih baik. Akhir sekali, dialog Sahkan ialah pilihan yang sangat praktikal apabila anda ingin meningkatkan pengalaman pengguna dan membenarkan pengguna menentukan sama ada mereka mahu keluar.

Tidak kira teknik yang anda pilih untuk digunakan untuk menutup halaman web, JavaScript ialah alat yang sangat berguna yang boleh membantu kami melakukan ini dengan mudah.

Atas ialah kandungan terperinci JavaScript menutup halaman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!