เรียกใช้โค้ด JavaScript เมื่อปิดหน้าต่างหรือรีเฟรชหน้า?

Question 1

มีวิธีเรียกใช้โค้ด JavaScript ขั้นสุดท้ายเมื่อผู้ใช้ปิดหน้าต่างเบราว์เซอร์หรือรีเฟรชหน้าหรือไม่

ฉันกำลังคิดถึงสิ่งที่คล้ายกับ onload แต่เหมือน onclose มากกว่า? ขอบคุณ.

ฉันไม่ชอบวิธี onbeforeunload ซึ่งมักจะให้กล่องยืนยันโผล่ขึ้นมา (ออกจากหน้า / อยู่ใน mozilla) หรือ (โหลดใหม่ / ไม่โหลดซ้ำบน chrome) มีวิธีรันโค้ดแบบเงียบ ๆ หรือไม่?

Question 2

มีทั้งwindow.onbeforeunloadและwindow.onunloadที่ใช้แตกต่างกันขึ้นอยู่กับเบราว์เซอร์ คุณสามารถกำหนดคุณสมบัติเหล่านี้ได้โดยการตั้งค่าคุณสมบัติของหน้าต่างเป็นฟังก์ชันหรือใช้.addEventListener:

window.onbeforeunload = function(){
   // Do something
}
// OR
window.addEventListener("beforeunload", function(e){
   // Do something
}, false);

โดยปกติonbeforeunloadจะใช้ในกรณีที่คุณต้องการหยุดไม่ให้ผู้ใช้ออกจากเพจ (เช่นผู้ใช้กำลังทำงานกับข้อมูลที่ไม่ได้บันทึกดังนั้นควรบันทึกก่อนออก) Operaonunloadไม่รองรับเท่าที่ฉันทราบ แต่คุณสามารถตั้งค่าทั้งสองอย่างได้ตลอดเวลา

Question 3

ตกลงผมพบว่าวิธีการแก้ปัญหาการทำงานนี้ประกอบด้วยการใช้เหตุการณ์แล้วทำให้ผลตอบแทนจากการจัดการbeforeunload nullการดำเนินการนี้จะเรียกใช้รหัสที่ต้องการโดยไม่มีกล่องยืนยันที่โผล่ขึ้นมา มันจะเป็นดังนี้:

window.onbeforeunload = closingCode;
function closingCode(){
   // do something...
   return null;
}

หวังว่านี่จะช่วยได้

Question 4

บางครั้งคุณอาจต้องการแจ้งให้เซิร์ฟเวอร์ทราบว่าผู้ใช้กำลังออกจากเพจ สิ่งนี้มีประโยชน์ตัวอย่างเช่นในการล้างข้อมูลรูปภาพที่ไม่ได้บันทึกที่จัดเก็บไว้ชั่วคราวบนเซิร์ฟเวอร์เพื่อทำเครื่องหมายผู้ใช้นั้นเป็น "ออฟไลน์" หรือเพื่อบันทึกเมื่อเสร็จสิ้นเซสชัน

ในอดีตคุณจะส่งคำขอ AJAX ในbeforeunloadฟังก์ชัน แต่มีปัญหาสองประการ หากคุณส่งคำขอแบบอะซิงโครนัสไม่มีการรับประกันว่าคำขอจะดำเนินการอย่างถูกต้อง หากคุณส่งคำขอแบบซิงโครนัสจะน่าเชื่อถือกว่า แต่เบราว์เซอร์จะหยุดทำงานจนกว่าคำขอจะเสร็จสิ้น หากเป็นการร้องขอที่ช้าผู้ใช้จะไม่สะดวกอย่างมาก

navigator.sendBeacon()โชคดีที่ตอนนี้เรามี ด้วยการใช้sendBeacon()วิธีนี้ข้อมูลจะถูกส่งแบบอะซิงโครนัสไปยังเว็บเซิร์ฟเวอร์เมื่อ User Agent มีโอกาสที่จะดำเนินการดังกล่าวโดยไม่ทำให้การยกเลิกการโหลดล่าช้าหรือส่งผลต่อประสิทธิภาพของการนำทางถัดไป วิธีนี้ช่วยแก้ปัญหาทั้งหมดในการส่งข้อมูลการวิเคราะห์: ข้อมูลถูกส่งอย่างน่าเชื่อถือส่งแบบอะซิงโครนัสและไม่ส่งผลกระทบต่อการโหลดหน้าถัดไป นี่คือตัวอย่างการใช้งาน:

window.addEventListener("unload", logData, false);

function logData() {
  navigator.sendBeacon("/log.php", analyticsData);
}

sendBeacon()จะได้รับการสนับสนุนใน:

ขอบ 14
Firefox 31
Chrome 39
Safari 11.1
โอเปร่า 26
iOS Safari 11.4

ขณะนี้ยังไม่รองรับใน:

Internet Explorer
โอเปร่ามินิ

นี่คือpolyfill สำหรับ sendBeacon ()ในกรณีที่คุณต้องการเพิ่มการรองรับสำหรับเบราว์เซอร์ที่ไม่รองรับ หากวิธีการดังกล่าวไม่มีอยู่ในเบราว์เซอร์ก็จะส่งคำขอ AJAX แบบซิงโครนัสแทน

Question 5

jQuery เวอร์ชัน:

$(window).unload(function(){
    // Do Something
});

ปรับปรุง : jQuery 3:

$(window).on("unload", function(e) {
    // Do Something
});

ขอบคุณ Garrett

Question 6

เอกสารประกอบที่นี่สนับสนุนการฟังเหตุการณ์ onbeforeunload และ / หรือเพิ่มตัวฟังเหตุการณ์บนหน้าต่าง

window.addEventListener('beforeunload', function(event) {
  //do something here
}, false);

คุณยังสามารถเติมคุณสมบัติ. onunload หรือ. onbeforeunload ของหน้าต่างด้วยฟังก์ชันหรือการอ้างอิงฟังก์ชัน

แม้ว่าพฤติกรรมจะไม่เป็นมาตรฐานในเบราว์เซอร์ แต่ฟังก์ชันนี้อาจส่งคืนค่าที่เบราว์เซอร์จะแสดงเมื่อยืนยันว่าจะออกจากหน้าหรือไม่

Question 7

คุณสามารถใช้window.onbeforeunload.

window.onbeforeunload = confirmExit;
function confirmExit(){
    alert("confirm exit is being called");
    return false;
}

Question 8

กรณีที่มีการเรียกเพื่อให้คุณสามารถกำหนดฟังก์ชั่นbeforeunloadwindow.onbeforeunload

Question 9

คุณสามารถลองสิ่งนี้:

<SCRIPT language="JavaScript">
<!--
function loadOut()
{
window.location="http://www.google.com";
}
//-->
</SCRIPT>

<body onBeforeUnload="loadOut()">