【原】js离开页面执行函数，onbeforeunload与onunload事件

当用户离开网页时，可以使用JavaScript来执行相应的操作。常用的两个事件是onbeforeunload和onunload。

1. onbeforeunload事件：

onbeforeunload事件在用户将要离开网页前触发。通常用于询问用户是否要离开网页或者保存未保存的修改。在这个事件中可以使用confirm()函数来显示一个确认框，让用户选择是留在网页还是离开网页。

使用方法如下：

window.onbeforeunload = function(){

return "您有未保存的修改，确定要离开吗？";

};

当用户点击关闭按钮或者浏览器的导航按钮时，会触发onbeforeunload事件，此时会弹出一个确认框，用户可以选择留在网页或者离开网页。

注意：在onbeforeunload事件中使用return语句返回一个非空字符串，才会显示确认框。如果返回一个空字符串或者没有返回值，则不会显示确认框。

2. onunload事件：

onunload事件在网页完全卸载后触发。通常用于执行一些清理操作，例如关闭数据库连接、清除缓存等。但是请注意，该事件在页面卸载后才触发，因此无法阻止用户离开页面。

使用方法如下：

window.onunload = function(){

// 执行一些清理操作

};

在onunload事件中可以执行一些清理操作，例如关闭数据库连接、清除缓存等。由于该事件在页面卸载后触发，因此在这里执行的操作不会影响用户的浏览体验。

案例说明：

假设我们有一个编辑页面，用户在离开页面前，需要提示并保存未保存的修改。可以使用onbeforeunload事件来实现。代码如下：

window.onbeforeunload = function(){

if(document.getElementById("content").value !== ""){

return "您有未保存的修改，确定要离开吗？";

}

};

在这个例子中，如果文本框中有未保存的内容，当用户离开页面时，会弹出一个确认框提示用户是否离开。如果文本框为空或者已保存，不会弹出确认框。

总结：

onbeforeunload和onunload是两个常用的离开页面事件。onbeforeunload事件用于询问用户是否离开页面以及保存未保存的修改，而onunload事件用于执行一些清理操作。通过使用这两个事件，可以增强用户体验并保证数据的完整性。但是需要注意的是，在使用这两个事件时要注意浏览器的兼容性，不同浏览器可能对这两个事件的行为有所区别。因此，在实际应用中需要进行充分的测试和兼容性处理。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.ynyuzhu.com/