介绍

我已经看到许多有关如何禁用浏览器后退按钮的问题,过去我回答过“这根本不可能”。 无论如何,禁用后退按钮不是一个好主意,如果用户冒险离开您的页面,那么他们将无法使用此按钮。

人们问如何控制或禁用“后退”按钮的主要原因是因为他们需要控制敏感(和/或)动态Web内容。 例如,他们可能试图确保用户注销后,点击浏览器的“后退”按钮将不会显示任何敏感数据。 或是他们试图确保当用户点击后退按钮时不会丢失用户的工作。

请注意,目前,Opera Web浏览器不支持OnBeforeUnload事件 window.onbeforeunload()事件

即将卸载网页之前,将触发JavaScript window.onbeforeload()事件。 这使我们能够确保用户确定要离开他们正在查看的页面。

关于此事件的独特之处在于,如果处理该事件的函数返回任何内容(“ true”,“ false”,“ null” ...一个字符串...任何内容),浏览器将显示一个确认提示窗口,说明:

您确定要离开此页面吗?
按确定继续,或按取消保留在当前页面上。

因此,例如,如果您只想显示一个确认框,询问用户是否真的要离开您的页面,则可以添加:


<script type="text/javascript">window.onbeforeunload = function(){ return;}
</script> 

如果您从处理onbeforeload事件的函数返回一个字符串,那么它将像这样插入到提示中:

您确定要离开此页面吗?
您返回的字符串在这里
按确定继续,或按取消保留在当前页面上。

在这种情况下,您将拥有JavaScript :


<script type="text/javascript">window.onbeforeunload = function(){ return 'Your Returned String Goes Here';}
</script>

如果用户单击“取消”按钮,则不会执行卸载事件,并且它们将保留在页面上,否则将被允许离开并清除其缓存。

为了防止出现确认框,请不要在函数中添加“返回”。

例如。


<script type="text/javascript">window.onbeforeunload = function(){}
</script> 

请记住,每次要卸载页面时都会触发window.onbeforeunload事件。 这意味着,如果用户单击页面上的按钮,并且页面发布回服务器,则将触发window.onbeforeunload事件。 在开发处理window.onbeforeunload事件的函数时,请考虑到这一点。 结论

window.onbeforeunload事件是确保用户确定离开网页的后果的一种好方法。

要记住的重要一点是,如果处理onbeforeunload事件JavaScript函数完全返回任何内容,则无论返回什么,都会自动显示一个确认框。 为了防止出现确认框,请不要在函数中添加“返回”。

另外,要注意的另一件事是,每次要卸载页面时都会触发onb​​eforeunload事件。

在处理此事件JavaScript函数中,您可以执行任何所需的操作。 例如,如果他们离开了,您可以进行Ajax调用以向服务器指示应该注销用户...或应该清除资源....或记录您真正想要的任何内容。

请注意,目前,Opera网络浏览器不支持OnBeforeUnload事件

我希望这篇小文章对您有所帮助。 编码愉快!

-弗林尼

From: https://bytes.com/topic/javascript/insights/825556-using-onbeforeunload-javascript-event

使用OnBeforeUnload JavaScript事件相关推荐

  1. javascript事件列表解说

    javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...

  2. javascript事件详细说明

    javascript事件列表解说javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触 ...

  3. javascript事件与event对象的属性

    javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...

  4. 精通JavaScript事件.详解

    事件(上) JavaScript事件列表 事件 解说 一般事件 onclick 鼠标点击时触发此事件 ondblclick 鼠标双击时触发此事件 onmousedown 按下鼠标时触发此事件 onmo ...

  5. JavaScript 事件 快速使用入门

    目录 JavaScript 事件汇总 添加与绑定事件 oncontextmenu 事件 禁用右击事件 onbeforeunload 事件 JavaScript 事件汇总 事件 描述 onload.on ...

  6. javascript事件列表解说(转载)

    javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...

  7. javascript --- 事件托付

    javascript 之 事件托付 长处:1.提高性能(仅仅须要对父级进行操作,子节点相同会拥有其相关属性和方法) 2.对于新加入的事件.也让其拥有父级事件的属性 <!doctype html& ...

  8. 【探讨】javascript事件机制底层实现原理

    前言 又到了扯淡时间了,我最近在思考javascript事件机制底层的实现,但是暂时没有勇气去看chrome源码,所以今天我来猜测一把 我们今天来猜一猜,探讨探讨,javascript底层事件机制是如 ...

  9. javaScript事件(二)事件处理程序

    一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 前面提到,事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.响应 ...

最新文章

  1. HDU-3177 Crixalis's Equipment 贪心
  2. Caffe代码导读(4):数据集准备
  3. backgroundworder 简单使用
  4. 计算机数日期,计算机如何计算两个日期之间的天数
  5. 聚合搜索V2.0泛目录站群二开源码 可做指定关键词
  6. 洛谷 P1396 营救
  7. 燃料电池厂商的市场竞争
  8. 编写kernel第一个Hello World
  9. H5与客户端交互的方式有哪些? 怎么做?
  10. The 2014 ACM-ICPC Asia Regional Anshan
  11. FF的插件iMacros简单交流
  12. 乌龟git解决冲突_关于git中自己的分支和主分支有冲突的解决方案(git和乌龟git)...
  13. Android Binder机制介绍
  14. RNA-seq的典型流程(protocol)
  15. 王者荣耀签到系统策划案
  16. python编写MySQL数据库查询/操作软件代码
  17. 不仅仅是“屠龙之技”-编译器开发者的精神胜利!
  18. Android软件开发面试题,Android入门
  19. 【云原生之kubernetes实战】在k8s环境下部署OneNav个人书签工具
  20. 【改进篇】Python实现VRP常见求解算法——禁忌搜索算法(TS)

热门文章

  1. JAVA:遍历目录下的文件
  2. 汇川H2U编程软件 AutoShop下载
  3. 在Vue框架中通过a标签实现下载本地资源的功能
  4. 读《Prioritizing disease genes with animproved dual label propagation framework》
  5. 使用电信光猫+华为路由器实现内网穿透,外网访问内网 之 路由器配置(华为路由WS5200 增强版)
  6. 1小时学会 POI 和 EasyExcel (超级详细)
  7. ECS的简单入门(三):Component
  8. 豆瓣图书Top250
  9. Vue.component 讲解
  10. 用户教程:如何利用商权管理费2.0快速实现消费增值?