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

当用户离开一个网页时，有时需要执行一些操作，比如保存未完成的表单数据或执行一些清理操作。在JavaScript中，可以使用onbeforeunload和onunload事件来实现这一功能。

1. onbeforeunload事件：

onbeforeunload事件会在用户即将离开页面时触发，它可以用来询问用户是否确认离开页面或执行某些操作。一般来说，当用户关闭浏览器标签、点击浏览器的后退按钮、点击其他超链接或输入新的URL时，该事件会被触发。

使用方法：

可以通过给window对象的onbeforeunload属性赋值一个函数来注册onbeforeunload事件的处理程序。例如：

window.onbeforeunload = function(){

return "确定离开页面吗？";

};

在上面的代码中，当用户离开页面时，会弹出一个提示框询问用户是否确定离开页面。提示框的内容由函数的返回值确定，如果返回一个非空的字符串，浏览器会将其作为提示框的内容显示给用户。

注意事项：

- 大多数浏览器不允许修改或定制离开页面提示框的样式，因为这是出于安全考虑。

- 大部分浏览器将忽略对onbeforeunload事件的绑定，只有在函数返回非空字符串时才会显示提示框。

2. onunload事件：

onunload事件会在用户完全离开页面后触发，它可以用来执行一些最终的清理操作。例如，保存表单数据、关闭打开的连接等。

使用方法：

可以通过给window对象的onunload属性赋值一个函数来注册onunload事件的处理程序。例如：

window.onunload = function(){

// 执行一些清理操作

};

在上面的代码中，当用户完全离开页面后，会执行给定的函数。

案例说明：

假设我们有一个简单的表单页面，用户需要在离开页面之前保存表单数据。我们可以使用onbeforeunload和onunload事件来实现这个功能。

```

```

在上述示例中，当用户尝试离开页面时，会弹出一个提示框询问用户是否确定离开。如果用户点击确定按钮，页面会执行onunload事件的处理程序，保存表单数据。

总结：

通过使用onbeforeunload和onunload事件，在用户离开页面时执行一些操作变得简单。在处理onbeforeunload事件时，可以通过返回一个带有自定义提示信息的字符串来询问用户是否确定离开页面。而在处理onunload事件时，可以执行一些最终的清理操作。

壹涵网络我们是一家专注于网站建设、企业营销、网站关键词排名、AI内容生成、新媒体营销和短视频营销等业务的公司。我们拥有一支优秀的团队，专门致力于为客户提供优质的服务。

我们致力于为客户提供一站式的互联网营销服务，帮助客户在激烈的市场竞争中获得更大的优势和发展机会！