JS针对浏览器窗口关闭事件的监听方法集锦

在JavaScript中，监听浏览器窗口关闭事件对于实现特定的用户交互或数据保存功能至关重要。下面将详细介绍几种常用的浏览器关闭事件监听方法。 1. 方式一：适用于IE浏览器，仅在关闭时提示 ```javascript window.onbeforeunload = onclose; function onclose() { if (event.clientX > document.body.clientWidth && event.clientY < 0 || event.altKey) { return "您要离开吗？"; } } ``` 此方法依赖于`onbeforeunload`事件，检查鼠标位置和`alt`键状态来判断是否为关闭操作，对刷新和直接关闭有区分。 2. 方式二：适用于IE和Firefox，不区分刷新和关闭 ```javascript window.onbeforeunload = onbeforeunload_handler; window.onunload = onunload_handler; function onbeforeunload_handler() { var warning = "确认退出?"; return warning; } function onunload_handler() { var warning = "谢谢光临"; alert(warning); } ``` 这个方法同时使用`onbeforeunload`和`onunload`事件，`onbeforeunload`用于提示，而`onunload`在页面实际卸载时执行。 3. 方式三：适用于IE和Firefox，不区分刷新和关闭，最简单形式 ```javascript window.onbeforeunload = onclose; function onclose() { return "您确定退出吗？"; } ``` 此方法同样利用`onbeforeunload`事件，但返回一个提示字符串，简化了代码。 4. 方式四：适用于IE和Firefox，不区分刷新和关闭，稍复杂 ```javascript var MSG_UNLOAD = "如果你此时离开档案系统，所做操作信息将全部丢失，是否离开?"; var UnloadConfirm = {}; // 启用监听浏览器刷新、关闭的方法 UnloadConfirm.set = function(confirm_msg) { window.onbeforeunload = function(event) { event = event || window.event; event.returnValue = confirm_msg; } }; // 关闭监听浏览器刷新、关闭的方法 UnloadConfirm.clear = function() { window.onbeforeunload = function() {}; }; UnloadConfirm.set(MSG_UNLOAD); ``` 这种方式通过创建一个对象`UnloadConfirm`来管理事件监听，方便启用和清除提示。 5. 方式五：只适用于IE6，关闭按钮和快捷键关闭，刷新不提示 ```javascript window.onbeforeunload = onclose; function onclose() { var warnning = '<fmt:message key="systemMessage.exitWarning" />'; var beforeExit = '<fmt:message key="systemMessage.beforeExitWarning" />'; if (event.clientY < 0 && event.clientX > document.body.clientWidth - 20 || event.clientY < 0 && event.clientX < 20 || event.altKey || event.ctrlKey || event.clientY > document.body.clientHeight) { alert(beforeExit); return warnning; } } ``` 这个方法特别针对IE6，通过更精确的条件判断来区分关闭与刷新。 另外，判断浏览器类型的JavaScript代码： ```javascript var Sys = {}; var ua = navigator.userAgent.toLowerCase(); if (window.ActiveXObject) { Sys.ie = ua.match(/msie ([\d.]+)/)[1] } else if (document.getBoxObjectFor) { Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1] } else if (window.MessageEvent && !document.attachEvent) { // Other browsers } ``` 这段代码通过检测`ActiveXObject`、`getBoxObjectFor`等特性来识别浏览器类型，支持IE和Firefox，并可扩展以识别其他浏览器。 这些监听方法有助于开发者在用户离开页面之前执行某些操作，如询问用户是否确认离开，或者自动保存数据。然而，现代浏览器可能对`onbeforeunload`事件的处理有所限制，可能不再允许自定义警告消息，而是显示默认的确认对话框。因此，在实际应用中，需要考虑这些限制并做出相应的调整。