เครื่องมือแก้ไข Downcodes นำเสนอคำอธิบายโดยละเอียดเกี่ยวกับเหตุการณ์การรีเฟรชหน้าการตรวจสอบ JavaScript การตรวจสอบเหตุการณ์การรีเฟรชหน้าถือเป็นสิ่งสำคัญในการพัฒนาเว็บ โดยสามารถช่วยให้นักพัฒนาดำเนินการที่จำเป็นบางอย่างเมื่อรีเฟรชหรือปิดเพจได้ เช่น การบันทึกข้อมูลผู้ใช้ การส่งคำขอ เป็นต้น อย่างไรก็ตาม เนื่องจากข้อจำกัดด้านความปลอดภัยของเบราว์เซอร์ จึงไม่ใช่เรื่องง่ายที่จะแยกแยะระหว่างการรีเฟรชเพจและการปิดกิจกรรมได้อย่างแม่นยำ บทความนี้จะเจาะลึกวิธีการทั่วไปหลายวิธี และวิเคราะห์ข้อดีและข้อเสียเพื่อช่วยคุณเลือกตัวเลือกที่เหมาะสมที่สุด
JavaScript สามารถมอนิเตอร์เหตุการณ์การรีเฟรชเพจได้หลายวิธี วิธีที่พบบ่อยที่สุดคือการใช้ beforeunload และ unload event Listener อย่างไรก็ตาม สิ่งสำคัญที่ควรทราบก็คือ เป็นเรื่องยากในทางเทคนิคที่จะตรวจสอบเฉพาะการรีเฟรชเพจโดยไม่ตรวจสอบเหตุการณ์การปิด เนื่องจากข้อจำกัดด้านความปลอดภัยของเบราว์เซอร์ โดยปกติแล้วทั้งสองเหตุการณ์นี้จะถูกทริกเกอร์ในเวลาเดียวกัน อย่างไรก็ตาม ด้วยเทคนิคบางอย่าง คุณสามารถลองแยกความแตกต่างระหว่างสองเหตุการณ์นี้ได้ เช่น โดยการตั้งค่าคุกกี้หรือใช้ sessionStorage เพื่อบันทึกสถานะ และตรวจสอบสถานะเหล่านี้เมื่อผู้ใช้โหลดเพจอีกครั้งเพื่อพิจารณาว่าเพจโหลดครบกำหนดหรือไม่ เพื่อรีเฟรชหรือปิด
เมื่อผู้ใช้พยายามรีเฟรชเพจ การตรวจสอบระดับหนึ่งสามารถทำได้ผ่านเหตุการณ์ beforeunload
window.addEventListener ('ก่อนยกเลิกการโหลด' ฟังก์ชัน (e) {
//ตั้งค่าข้อความเตือนให้แสดงเมื่อรีเฟรช
varการยืนยันข้อความ = 'คุณแน่ใจหรือไม่ว่าต้องการรีเฟรชหน้านี้? -
(e || window.event).returnValue = ยืนยันข้อความ;
ข้อความยืนยันการส่งคืน;
-
รหัสนี้จะปรากฏขึ้นกล่องโต้ตอบการยืนยันเมื่อผู้ใช้รีเฟรชหน้า อย่างไรก็ตาม มันยังเริ่มทำงานเมื่อผู้ใช้พยายามปิดเพจอีกด้วย ดังนั้น นี่ไม่ใช่วิธีที่ชัดเจนในการแยกความแตกต่างระหว่างการรีเฟรชและการปิดระบบ
ข้อมูลสถานะของผู้ใช้ในระหว่างเซสชันสามารถบันทึกผ่าน sessionStorage ได้ ซึ่งจะใช้ได้เฉพาะในแท็บเบราว์เซอร์ปัจจุบันเท่านั้น เมื่อปิดแท็บ ข้อมูลที่จัดเก็บไว้ใน sessionStorage จะถูกล้าง
//ดำเนินการเมื่อโหลดหน้า
window.onload = ฟังก์ชั่น () {
ถ้า (sessionStorage.getItem (is_reloaded)) {
console.log(เพจถูกรีเฟรช);
-
sessionStorage.setItem (is_reloaded, จริง);
-
window.addEventListener ('ก่อนยกเลิกการโหลด' ฟังก์ชัน (e) {
ถ้า (!window.closed) {
sessionStorage.removeItem (is_reloaded);
-
-
ในตัวอย่างนี้ เราตั้งค่ารายการ is_reloaded ใน sessionStorage เมื่อเพจโหลด เมื่อเพจรีเฟรช รายการนั้นจะยังคงอยู่ ดังนั้นเราสามารถบอกได้ว่าเพจนั้นรีเฟรชแล้วหรือไม่ โดยการตรวจสอบ is_reloaded วิธีนี้ยังไม่สามารถแยกความแตกต่างระหว่างการรีเฟรชและการปิดได้อย่างถูกต้อง แต่เมื่อรวมกับการวิเคราะห์รูปแบบพฤติกรรมผู้ใช้ ก็สามารถให้ความแตกต่างในระดับหนึ่งได้
API การมองเห็นเพจให้ความสามารถในการตรวจสอบว่าผู้ใช้มองเห็นเพจหรือไม่ และยังสามารถใช้เพื่อระบุพฤติกรรมของผู้ใช้ทางอ้อมอีกด้วย
document.addEventListener('การเปลี่ยนแปลงการมองเห็น', ฟังก์ชั่น() {
ถ้า (document.visibilityState === 'ซ่อน') {
// ผู้ใช้ออกจากหน้าปัจจุบันแล้ว อาจโดยการปิดหรือกระโดด
-
ถ้า (document.visibilityState === 'มองเห็นได้') {
// หน้านี้จะปรากฏให้เห็นไม่ว่าจะโดยการเปิด รีเฟรช หรือเปลี่ยนกลับจากแท็บอื่น
-
-
ด้วย API นี้ คุณสามารถดำเนินการบางอย่างเมื่อผู้ใช้ออกจากเพจ จากนั้นจึงตัดสินใจเมื่อผู้ใช้กลับมาที่เพจ อย่างไรก็ตาม สิ่งนี้ไม่ได้ตรวจสอบเฉพาะเหตุการณ์การรีเฟรชอย่างแม่นยำเท่านั้น
คุณสามารถตั้งค่าคุกกี้ใน JavaScript และให้คุกกี้มีเวลาหมดอายุสั้น ๆ ตรวจสอบว่ามีคุกกี้อยู่หรือไม่เมื่อผู้ใช้รีเฟรช และตัดสินตามการประทับเวลา:
//ตั้งค่าคุกกี้
ฟังก์ชั่น setCookie (ชื่อ, ค่า, วินาที) {
var หมดอายุ = วันที่ใหม่ (Date.now() + วินาที * 1,000);
document.cookie = ชื่อ + = + ค่า + ;หมดอายุ= +หมดอายุ.toUTCString();
-
//หยิบคุกกี้
ฟังก์ชั่น getCookie (ชื่อ) {
var keyValue = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
กลับ keyValue ? keyValue[2] : null;
-
// ตรวจสอบการรีเฟรช
window.addEventListener('โหลด', ฟังก์ชั่น() {
var LastTime = getCookie('last_refresh_time');
var currentTime = Date.now();
ถ้า (lastTime && currentTime - parseInt (lastTime) < 1,000) {
// หากความแตกต่างระหว่างการประทับเวลาทั้งสองน้อยกว่า 1 วินาที จะถือเป็นเหตุการณ์รีเฟรช
console.log(เพจถูกรีเฟรช);
-
setCookie('last_refresh_time', currentTime, 1);
-
ด้วยการตั้งค่าและตรวจสอบการมีอยู่ของคุกกี้และความแตกต่างจากเวลาปัจจุบัน เราอาจสามารถอนุมานได้ว่าเพจได้รับการรีเฟรชหรือเพิ่งเปิด อย่างไรก็ตาม เนื่องจากคุกกี้สามารถขยายหน้าต่างและแท็บได้ นี่จึงยังไม่ใช่วิธีแก้ปัญหาที่สมบูรณ์แบบ
1. จะตรวจสอบเหตุการณ์การรีเฟรชหน้าผ่าน JavaScript ได้อย่างไร?
คุณสามารถตรวจสอบเหตุการณ์การรีเฟรชเพจผ่าน JavaScript เพื่อดำเนินการที่เกี่ยวข้อง วิธีหนึ่งคือใช้เหตุการณ์ beforeunload
window.addEventListener('beforeunload', function(event) { // โค้ดถูกดำเนินการก่อนที่เพจจะถูกรีเฟรช // ตัวอย่างเช่น, การส่งคำขอ, การบันทึกข้อมูล, ฯลฯ });2. จะตรวจสอบเฉพาะเหตุการณ์การรีเฟรชหน้า แต่ไม่ใช่เหตุการณ์การปิดหน้าใน JavaScript ได้อย่างไร
หากคุณต้องการมอนิเตอร์เหตุการณ์การรีเฟรชเพจเท่านั้น แต่ไม่ใช่เหตุการณ์การปิดเพจ คุณสามารถใช้เหตุการณ์ beforeunload และ unload ร่วมกันได้
window.addEventListener('beforeunload', function(event) { // โค้ดถูกดำเนินการก่อนที่เพจจะถูกรีเฟรช // ตัวอย่างเช่น การส่งคำขอ บันทึกข้อมูล ฯลฯ }); window.addEventListener('unload', function(event) { // รหัสดำเนินการเมื่อเพจถูกปิด // ตัวอย่างเช่น การล้างทรัพยากร ประหยัดเวลาออก ฯลฯ });ด้วยวิธีนี้ เมื่อผู้ใช้รีเฟรชเพจ เหตุการณ์ beforeunload จะถูกทริกเกอร์ และเมื่อผู้ใช้ปิดเพจ ทั้งเหตุการณ์ beforeunload และ unload จะถูกทริกเกอร์
3. จะตรวจสอบเฉพาะเหตุการณ์รีเฟรชของหน้าเว็บใน JavaScript ในขณะที่ไม่รวมการตรวจสอบวิธีการนำทางอื่น ๆ ได้อย่างไร?
หากคุณต้องการตรวจสอบเหตุการณ์การรีเฟรชของเว็บเพจเท่านั้น แต่ไม่ใช่วิธีการนำทางอื่นๆ (เช่น การคลิกลิงก์หรือคลิกปุ่มไปข้างหน้า/ย้อนกลับ) คุณสามารถใช้เหตุการณ์ beforeunload ร่วมกับอินเทอร์เฟซ PerformanceNavigation
window.addEventListener('beforeunload', function(event) { // ตรวจสอบว่าเป็นเหตุการณ์รีเฟรชหน้าเว็บหรือไม่หาก (Performance.navigation.type === Performance.navigation.TYPE_RELOAD) { // โค้ดถูกดำเนินการก่อนรีเฟรชเพจ // เช่น ส่งคำขอ บันทึกข้อมูล และการดำเนินการอื่นๆ}});ใช้ Performance.navigation.type เพื่อกำหนดประเภทการนำทาง หากเป็น TYPE_RELOAD แสดงว่าเพจถูกทริกเกอร์โดยการดำเนินการรีเฟรช ด้วยวิธีนี้ โค้ดที่เกี่ยวข้องจะถูกดำเนินการเฉพาะในเหตุการณ์การรีเฟรชหน้าเว็บเท่านั้น
ฉันหวังว่าเนื้อหาข้างต้นจะช่วยให้คุณเข้าใจวิธีการตรวจสอบเหตุการณ์การรีเฟรชหน้า JavaScript ได้ดีขึ้น เครื่องมือแก้ไข Downcodes เตือนคุณว่าในการใช้งานจริง คุณต้องเลือกวิธีการที่เหมาะสมตามความต้องการเฉพาะและจัดการความเข้ากันได้