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

onbeforeunload和onunload是JavaScript中用于在页面离开时执行相应函数的事件。

onbeforeunload事件在页面即将离开时触发，它可以用来询问用户是否确认要离开页面，或者在离开页面前执行一些操作。当onbeforeunload事件触发时，浏览器会弹出一个警告框，显示一条消息和两个按钮：一个"Stay on this page"按钮和一个"Leave this page"按钮。用户可以选择留在当前页面或离开页面。如果用户点击"Stay on this page"按钮，页面将不会离开，如果用户点击"Leave this page"按钮，页面将会离开。

onunload事件在页面完全卸载后触发，它可以用于执行一些清理操作，例如关闭数据库连接、保存用户数据等。当onunload事件触发时，页面已经在浏览器中卸载，用户已经无法看到页面或与页面交互。因此，onunload事件只适合执行一些不需要用户参与的操作，而不适合弹出警告框或询问用户是否确认离开页面等交互操作。

使用onbeforeunload和onunload事件的方法如下：

1. 使用onbeforeunload事件：

```javascript

window.onbeforeunload = function(event) {

event.returnValue = "确认离开页面吗？";

}

```

在onbeforeunload事件处理程序中，我们可以使用event.returnValue属性设置警告框中显示的消息。在回答警告框时，我们可以通过点击"Stay on this page"按钮或"Leave this page"按钮来设置event.returnValue的值。如果event.returnValue被赋值为非空字符串，则浏览器将弹出警告框并显示指定的消息。

2. 使用onunload事件：

```javascript

window.onunload = function() {

// 执行清理操作

}

```

在onunload事件处理程序中，我们可以编写需要在页面卸载后执行的清理操作的代码。例如，关闭数据库连接、保存用户数据等。

注意，onbeforeunload事件只能返回一个字符串，并且这个字符串将被用作警告框中的消息。如果返回值为空字符串或未指定返回值，则不会弹出警告框。而onunload事件没有返回值的限制，我们可以在事件处理程序中编写任何需要执行的代码。

以下是一个关于onbeforeunload事件的示例：

```html

跳转到Google

```

在这个示例中，当用户点击按钮跳转到Google时，浏览器会弹出一个警告框，提示用户确认离开页面。用户可以选择留在当前页面或离开页面。

总之，onbeforeunload和onunload事件提供了在页面离开时执行相应函数的方式。onbeforeunload事件可以用于询问用户是否确认离开页面，而onunload事件可以用于执行一些清理操作。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/