📌  相关文章
📜  HTML | DOM onbeforeunload 事件(1)

📅  最后修改于: 2023-12-03 14:41:48.269000             🧑  作者: Mango

HTML | DOM onbeforeunload 事件

HTML | DOM onbeforeunload 事件发生在窗口、文档或元素卸载前，允许程序员在卸载前添加确认操作。这个事件可以以函数形式使用。

语法

以下是HTML | DOM onbeforeunload 事件的基本语法：

window.onbeforeunload = functionRef;

在这个语法中：

  • functionRef：指在事件发生时执行的函数名称或函数对象。
示例

以下是一个简单的示例代码，展示了如何使用onbeforeunload事件：

<!DOCTYPE html>
<html>

<head>
    <title>onbeforeunload 事件示例</title>
</head>

<body onbeforeunload="return confirmWantToLeave();">
    <h1>onbeforeunload 事件示例</h1>
    <button onclick="alert('你点击了按钮')">点我！</button>

    <script>
        function confirmWantToLeave() {
            return "确定要离开这个页面吗？";
        }
    </script>

</body>

</html>

当你试图关闭或离开这个页面时，将会出现一个提示框，询问是否确定要离开这个页面。如果你点击了确定按钮，页面将被卸载并关闭。如果你点击了取消按钮，页面将不会卸载。

注意事项
  • onbeforeunload事件仅在页面卸载前触发，不会在刷新页面或离开当前URL时触发。
  • 在onbeforeunload事件处理程序中调用alert()函数将无任何作用。通常建议使用confirm()函数。
  • 如果onbeforeunload事件处理程序返回字符串，浏览器将显示带有这个字符串的提示框。
结论

HTML | DOM onbeforeunload事件可以很好的帮助程序员在窗口、文档或元素卸载前添加确认操作，避免用户误操作和不必要的损失。在实际开发中，应根据需求合理使用该事件。