ฉันกำลังเพิ่มกล่องโต้ตอบ "ยืนยันว่าคุณต้องการออก" ในเว็บไซต์ของฉัน และกำลังประสบกับพฤติกรรมแปลกๆ ของเหตุการณ์ onbeforeunload
เอกสารค่อนข้างชัดเจน: หากเพจของคุณกำลังจะ จะถูกยกเลิกการโหลดงานนี้เรียกว่า เมื่อ eventHandler ของคุณส่งคืนสตริง ระบบจะขอให้ผู้ใช้ยืนยัน สตริงอาจแสดงให้เขาเห็นทั้งนี้ขึ้นอยู่กับเบราว์เซอร์
แต่ในเว็บไซต์ตัวอย่างเล็กๆ ฉันสังเกตเห็นว่า beforeunload จะถูกไล่ออกจริงๆ ก็ต่อเมื่อผู้ใช้โต้ตอบกับเว็บไซต์เท่านั้น นี่คือการตั้งค่าการทดสอบของฉัน:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script type="text/javascript">
window.onload = function () {
$("#placeholder").text("website loaded")
window.onbeforeunload = function () {
return "Reloading the page will reset the survey!";
}
}
</script>
</head>
<body>
<p id='placeholder'></p>
</body>
</html>
เมื่อหน้าต่างถูกโหลด ข้อความย่อหน้าจะเปลี่ยนไปและมีการลงทะเบียน eventHandler สำหรับ beforeunload ถ้าฉันโหลดสิ่งนี้ใน Firefox ย่อหน้าจะเปลี่ยนไปทันที
แต่หากฉันปิดแท็บหรือโหลดซ้ำ จะไม่มีการถามการยืนยัน กล่องโต้ตอบการยืนยันจะปรากฏขึ้นเฉพาะเมื่อฉันคลิกบนเว็บไซต์เท่านั้น การสลับแท็บไปมาไม่เพียงพอ การรอประมาณ 10 วินาทีนั้นไม่เพียงพอ
ลักษณะการทำงานจะเหมือนกันใน Chrome
เมื่อฉันคลิกเข้าเว็บไซต์แล้ว ระบบจะถามคำยืนยันเสมอ ฉันสามารถให้แท็บอื่นโฟกัสและปิดตัวอย่างนี้ (โดยการคลิกขวาและ "ปิดแท็บ") เพื่อขอการยืนยัน หรือมีแท็บอื่นถูกโฟกัสอยู่ และฉันพยายามปิดเบราว์เซอร์ มันถามเพื่อยืนยัน
เกิดอะไรขึ้นที่นี่ ฉันจะแน่ใจได้อย่างไรว่ากิจกรรมจะเริ่มทำงานก่อนที่ไซต์จะถูกยกเลิกการโหลด
นี่คือวิดีโอ: 
