离开页面警告实现与浏览器兼容-优快云博客

本文介绍如何在前端使用JavaScript实现用户离开页面时的警告提示，适用于表格填写、问卷和文档编辑等场景。onbeforeunload事件在页面刷新或关闭前触发，允许自定义提示信息，但不同浏览器支持和展示效果可能有差异。详细讲解了语法和浏览器兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

快速上手

有时我们需要在一些页面加上离开警告，比如表格填写页面，问卷页面，文档编辑页面，就可以使用这代码

        window.onbeforeunload = function(event) {
            event.returnValue = "";
            //To Do Something
        };

这样当用户尝试离开当前页面时，就会触发这样的提示框

但是需要注意的是，这是浏览器自带的提示框，可能每个浏览器都不一样的，也有可能部分浏览器不支持

onbeforeunload 事件在即将离开当前页面（刷新或关闭）时触发。

该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。

对话框默认的提示信息根据不同的浏览器有所不同，标准的信息类似 "确定要离开此页吗？"。该信息不能删除。

但你可以自定义一些消息提示与标准信息一起显示在对话框。

注意： 如果你没有在 <body> 元素上指定 onbeforeunload 事件，则需要在 window 对象上添加事件，并使用 returnValue 属性创建自定义信息(查看以下语法实例)。

注意： 在 Firefox 浏览器中，只显示默认提醒信息（不显示自定义信息）。

表格中的数字表示支持该事件的第一个浏览器的版本号。

事件	谷歌	ie	火狐	Safari	欧朋
onbeforeunload	Yes	Yes	Yes	Yes	15.0

HTML 中：

<element οnbefοreunlοad="myScript">尝试一下

JavaScript 中：

object.οnbefοreunlοad=function(){myScript};尝试一下

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("beforeunload", myScript);尝试一下

注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

技术细节

参考文章