Rumah  >  Artikel  >  hujung hadapan web  >  Bincangkan bagaimana javascript melaksanakan fungsi penutupan tetingkap

Bincangkan bagaimana javascript melaksanakan fungsi penutupan tetingkap

PHPz
PHPzasal
2023-04-24 10:52:22865semak imbas

Dengan populariti Internet, reka bentuk laman web menjadi semakin penting. Dalam reka bentuk laman web, javascript boleh membantu kami melaksanakan beberapa fungsi yang hebat. Salah satu fungsi biasa ialah menutup tetingkap. Dalam artikel ini, kami akan meneroka cara JavaScript melaksanakan fungsi penutupan tetingkap.

Pertama, kita perlu memahami beberapa sintaks javascript asas. Dalam javascript, untuk menutup tetingkap semasa, kita perlu menggunakan kaedah window.close(). Kaedah ini akan menutup tetingkap halaman semasa, sama seperti pengguna mengklik butang tutup penyemak imbas.

Walau bagaimanapun, dalam aplikasi sebenar, kami memerlukan fungsi yang lebih kompleks. Sebagai contoh, apabila pengguna mengklik pada pautan, ia membuka tetingkap baharu dan ditutup secara automatik selepas beberapa ketika. Sebagai alternatif, apabila pengguna telah selesai membaca petua alat, ia akan ditutup secara automatik. Di bawah, kami akan meneroka cara melaksanakan ciri ini.

Mula-mula, mari lihat cara menutup tetingkap selepas tempoh masa. Kita boleh menggunakan kaedah setTimeout() untuk mencapai fungsi ini. Kaedah setTimeout() membolehkan kami melaksanakan fungsi selepas tempoh masa tertentu. Dalam contoh ini, kami akan menggunakan kaedah window.close() sebagai fungsi untuk menutup tetingkap selepas satu tempoh masa.

setTimeout(function(){
  window.close();
}, 3000); // 3 seconds

Dalam kod di atas, kami menghantar fungsi tanpa nama kepada kaedah setTimeout(), yang akan dilaksanakan selepas 3 saat. Dalam fungsi, kami memanggil kaedah window.close() untuk menutup tetingkap.

Walau bagaimanapun, disebabkan isu keselamatan, kebanyakan penyemak imbas menghalang javascript daripada menutup tetingkap secara automatik. Pengguna mesti menutup tetingkap secara manual atau membenarkan penutupan automatik tetingkap dalam tetapan penyemak imbas.

Seterusnya, mari lihat cara membuka tetingkap baharu apabila pautan diklik dan menutupnya secara automatik selepas satu tempoh masa. Kita boleh menggunakan kaedah window.open() untuk membuka tetingkap baharu. Selepas membuka tetingkap baharu, kami menggunakan kaedah setTimeout() untuk memanggil kaedah window.close() untuk menutup tetingkap baharu. Dalam contoh ini, kami juga akan menggunakan kaedah clearTimeout() untuk membatalkan penutupan automatik tetingkap untuk menghalang pengguna daripada menutup tetingkap secara manual.

var newWindow = window.open('http://www.example.com'); // open new window
var windowTimeout = setTimeout(function(){
  newWindow.close();
}, 3000); // 3 seconds

// cancel auto close window operation if user manually close the window
newWindow.onbeforeunload = function(){
  clearTimeout(windowTimeout);
};

Dalam kod di atas, kami membuka tetingkap baharu menggunakan kaedah window.open() dan menetapkannya kepada pembolehubah newWindow. Kami kemudian menggunakan kaedah setTimeout() untuk mengikat kaedah window.close() kepada pemasa yang menutup tetingkap baharu secara automatik. Dalam fungsi panggil balik pemasa, kami memanggil kaedah newWindow.close() untuk menutup tetingkap baharu.

Untuk mengelakkan pengguna menutup tetingkap secara manual, kami menggunakan acara onbeforeunload untuk mendaftar pengendali. Apabila pengguna cuba menutup tetingkap baharu, kami menggunakan kaedah clearTimeout() untuk membatalkan penutupan automatik tetingkap.

Akhir sekali, mari kita lihat cara menutup petua alat selepas mengkliknya. Dalam JavaScript, kami boleh menggunakan kaedah confirm() untuk memaparkan kotak gesaan yang meminta pengguna sama ada untuk meneruskan operasi. Apabila pengguna mengklik butang sahkan atau batal, kaedah sahkan() akan mengembalikan benar atau salah untuk menunjukkan pilihan pengguna.

var result = confirm('Are you sure you want to continue?');
if(result){
  window.close();
}

Dalam kod di atas, kami memanggil kaedah confirm() untuk memaparkan kotak gesaan. Apabila pengguna mengklik butang sahkan, kami akan memanggil kaedah window.close() untuk menutup tetingkap.

Ringkasan

Javascript membolehkan kami melaksanakan beberapa fungsi yang sangat berkuasa, termasuk penutupan tetingkap. Kita boleh menggunakan kaedah window.close() untuk menutup tetingkap semasa, atau menggunakan kaedah setTimeout() untuk menutup tetingkap secara automatik. Apabila membuka tetingkap baharu, kita boleh mengikat kaedah window.close() kepada pemasa yang menutup tetingkap baharu secara automatik untuk mencapai kefungsian yang lebih mendalam. Untuk pemilihan pengguna, kami boleh menggunakan kaedah confirm() untuk memaparkan kotak gesaan dan menutup tetingkap berdasarkan pilihan mereka.

Sama ada anda seorang pereka laman web atau pengaturcara, JavaScript ialah kemahiran penting. Harap artikel ini dapat membantu anda menguasai fungsi javascript penutup tetingkap.

Atas ialah kandungan terperinci Bincangkan bagaimana javascript melaksanakan fungsi penutupan tetingkap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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