js实现关闭网页时是否离�

你是否经常在关闭网页时看到确认是否离开当前页面的提示框？一些在线测试系统、信息录入系统等。经常有这些提示，以免用户有意无意地关闭页面，导致数据丢失。实现过程非常简单，在HTML DOM事件中使用onunload和onbeforeunload方法。

卸载事件属性

定义：当用户卸载文档时，执行一个JavaScript，例如：

//body body on nload='再见()'//window window . onbeforeunload=function(e){ vare=window . event | | e；E.returnValue=(“您确定要离开当前页面吗？”);}用法：当用户离开页面时，会发生unload事件。注意：如果重新加载页面，卸载事件(和onload事件)也会被触发。

触发者：

当您通过地址栏或收藏夹转到其他页面时，单击后退、前进和刷新，当您调用以下任一事件时，单击到其他页面的url连接：单击、文档写入、文档打开、文档关闭和窗口关闭。窗口导航，窗口导航和查找，位置替换，位置重新加载，表单提交。当打开一个窗口打开的页面时，将该页面的窗口名称传递给要打开的页面。当重新分配location.href的值时。当通过输入类型='提交'按钮提交带有指定操作的表单时。Onbeforeunload事件属性

定义：离开当前页面(刷新或关闭)时执行JavaScript，例如：

//bodybody onbeforeunload='再见()'//window window . onbeforeunload=function(e){ vare=window . event | | e；E.returnValue=(“您确定要离开当前页面吗？”);}用法：离开当前页面(刷新或关闭)时会触发onbeforeunload事件。此事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。该对话框的默认提示消息根据不同的浏览器而有所不同，标准消息类似于“您确定要离开此页面吗？”。无法删除此信息。但是您可以自定义一些消息提示，以便与标准信息一起显示在对话框中。注意：在火狐浏览器中，只显示默认提醒信息(不显示自定义信息)。

触发者：

当您通过地址栏或收藏夹转到其他页面时，单击后退、前进和刷新，当您调用以下任一事件时，单击到其他页面的url连接：单击、文档写入、文档打开、文档关闭和窗口关闭。窗口导航，窗口导航和查找，位置替换，位置重新加载，表单提交。当打开一个窗口打开的页面时，将该页面的窗口名称传递给要打开的页面。当重新分配location.href的值时。通过输入type="submit "按钮提交具有指定操作的表单时。

浏览器支持级别

目前主流浏览器支持这两种事件属性

摘要

Onunload和onbeforeunload都是在刷新或关闭时调用的，可以通过window . on nload在脚本脚本或正文中指定。不同的是onbeforeunload是在onunload之前执行的，也可以阻止onunload的执行。页面刷新或关闭时也调用Onbeforeunload，去服务器读取新页面时调用onbeforeunload，但读取尚未开始；另一方面，Onunload已经从服务器读取了要加载的新页面，并且在当前页面即将被替换时被调用。Onunload不能阻止页面更新和关闭，但onbeforeunload可以。

附件：

加载页面时只执行onload

当页面关闭时，首先执行onbeforeunload，最后执行onunload

刷新页面时，首先执行onbeforeunload，然后执行onunload，最后执行onload

附上一些效果图：

绑定正文标签的代码：

！doctype HTML Head metachartset=' UTF-8 '标题测试/标题脚本功能检查离开(){事件。返回值=“您确定要离开当前页面吗？”；}/script/head body on before unload=' check leave()'在/body/htmlgoogle browser下测试效果：

单击刷新按钮：

单击后退按钮：

通过任务栏或收藏夹转到其他界面：

关闭页面：

边缘下的效果：

单击刷新按钮：

单击后退按钮：

关闭页面：

注意：在新的火狐浏览器(我用的是： 57.0版)中，上面写的不生效？

绑定窗口对象的代码：

！doctype HTML Head metachartset=' UTF-8 ' Title Test/Title Script window . on before Unload=Function(e){ var e=window . event | | e；E.returnValue=(“您确定要离开当前页面吗？”);Firefox下的脚本/头体测试/body/htmleffect:

单击刷新按钮：

单击后退按钮：

关闭页面：

注意：这种方法在Google浏览和edge浏览器下依然适用，效果和第一种一样！