JavaScript onbeforeunload 事件

onbeforeunload 事件发生在文档卸载之前。它会在确认对话框中显示一条语句，使用提供的链接来决定是保留当前页面还是转到下一页。你可以使用 onbeforeunload 事件询问用户是否希望停留在当前页面。

换句话说，任何会带你到新页面的链接，例如文本链接、图片链接或其他类型的链接，都会触发 onbeforeunload 事件。如果用户点击确认框中的“确定”，则转到下一页；如果点击“取消”，则停留在同一页。无法删除对话框中的消息。

语法

onbeforeunload 事件使用多个标签和函数。

• HTML 中的 onbeforeunload 属性

• JavaScript 中的 onbeforeunload 属性

• 使用 addEventListener() 方法的 JavaScript 中的 onbeforeunload 属性

说明

当你即将离开一个具有 beforeunload 事件监听器的网页时，beforeunload 事件会弹出一个确认框，询问你是否确定要离开。

如果你继续，浏览器会带你到新页面。否则，导航将被停止。

根据规范，必须通过在 beforeunload 事件处理程序中调用 preventDefault() 方法来显示确认对话框。

• 不带 window 的 JavaScript 中的 onbeforeunload 属性

说明

过去，一些浏览器允许你显示一条独特的消息在确认对话框中。用户应该被警告说，如果他们导航离开，他们的数据将会丢失。不幸的是，用户欺诈是此功能常见的用法。因此，自定义响应不再被接受。

根据 JavaScript 规范，beforeunload 事件处理程序会忽略 confirm()、alert() 和 prompt() 函数。

示例

以下示例使用 onbeforeunload 属性来处理链接。

示例 1

onbeforeunload 属性使用 window 对象并显示确认框。在这里，我们使用 HTML 标签的基本事件。

输出

下图显示了带有确认值的 onbeforeunload 事件。

输出 1

第一次点击链接

输出 2

第二次点击链接

示例 2

onbeforeunload 属性使用 window 对象并显示确认框。在这里，我们使用带有数据的基本事件。

输出

下图显示了带有确认值的 onbeforeunload 事件。

示例 3

onbeforeunload 属性使用 window 对象并显示确认框。在这里，我们在 window.addEventListener 属性中使用基本的事件，并通过函数获取链接。

输出

下图显示了带有确认值的 onbeforeunload 事件。

示例 4

onbeforeunload 属性不使用 window 对象并显示确认框。在这里，我们在网页的 addEventListener 属性中使用基本事件。

输出

下图显示了不带 window 的 onbeforeunload 事件。

示例 5

onbeforeunload 属性不使用 window 对象并显示确认框。在这里，我们使用网页的事件和数据。

输出

下图显示了不带 window 的 onbeforeunload 事件。

支持的 Web 浏览器

以下浏览器及其版本支持 onbeforeunload 事件。

• Google Chrome 1
• Edge 版本 12
• Firefox 1
• Safari 版本 3
• Opera 版本 12

结论

JavaScript 的 onbeforeunload 事件可用于加载链接或页面并带有确认。它使用 event 对象加载网页或窗口。它有助于在加载网页之前获取正确的下一个页面。