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

在JavaScript中，我们可以使用两个事件来执行离开页面时的函数：onbeforeunload和onunload。

onbeforeunload事件在页面准备关闭之前触发，它允许我们在用户离开页面之前执行一些代码。该事件可以用于提示用户是否要离开页面或保存未保存的更改。当用户点击关闭按钮、点击浏览器导航按钮、输入新的URL或关闭浏览器时，该事件都会被触发。

onunload事件在页面关闭后触发，即当页面已经被卸载时执行。它可以用于清理工作，例如关闭WebSocket连接、清除本地存储数据等。

这两个事件都可以通过给window对象添加事件监听器来使用：

window.onbeforeunload = function(){

// 在页面关闭前执行的代码

// 返回的字符串会显示在一个对话框中，用于提示用户确认离开页面

return "确定要离开吗？";

};

window.onunload = function(){

// 在页面关闭后执行的代码

};

接下来，我们将通过一个案例来说明如何使用这两个事件。

案例：在用户离开页面前提示保存未保存的更改

HTML代码：

JavaScript代码（script.js）：

var unsavedChanges = false;

window.onbeforeunload = function(){

if(unsavedChanges){

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

}

};

document.getElementById("textArea").addEventListener("input", function(){

unsavedChanges = true;

});

window.onunload = function(){

// 在这里可以执行一些清理工作，例如保存数据

};

在这个案例中，我们给文本框添加了一个input事件监听器，当用户在文本框中输入内容时，unsavedChanges变量会被设置为true表示有未保存的更改。当用户离开页面时，onbeforeunload事件会触发，并且根据unsavedChanges的值决定是否显示一个提示对话框询问用户是否要离开页面。如果unsavedChanges为true，表明有未保存的更改，将返回一个提示字符串；否则，页面会直接关闭。另外，在onunload事件中，我们可以执行一些清理工作，例如保存数据。

总结：

在JavaScript中，onbeforeunload和onunload事件可以用来执行离开页面时的函数。onbeforeunload事件在页面准备关闭之前触发，它可以用于提示用户是否要离开页面或保存未保存的更改；onunload事件在页面关闭后触发，它可以用于执行清理工作。我们可以通过给window对象添加事件监听器来使用这两个事件。在实际应用中，可以根据具体需求为这两个事件添加相应的处理逻辑，例如提示未保存的更改、保存数据等。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/