使用OnBeforeUnload JavaScript事件
我已经看到许多有关如何禁用浏览器后退按钮的问题,过去我回答过“这根本不可能”。 无论如何,禁用后退按钮不是一个好主意,如果用户冒险离开您的页面,那么他们将无法使用此按钮。
人们问如何控制或禁用“后退”按钮的主要原因是因为他们需要控制敏感(和/或)动态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函数完全返回任何内容,则无论返回什么,都会自动显示一个确认框。 为了防止出现确认框,请不要在函数中添加“返回”。
另外,要注意的另一件事是,每次要卸载页面时都会触发onbeforeunload事件。
在处理此事件JavaScript函数中,您可以执行任何所需的操作。 例如,如果他们离开了,您可以进行Ajax调用以向服务器指示应该注销用户...或应该清除资源....或记录您真正想要的任何内容。
请注意,目前,Opera网络浏览器不支持OnBeforeUnload事件
我希望这篇小文章对您有所帮助。 编码愉快!
-弗林尼
From: https://bytes.com/topic/javascript/insights/825556-using-onbeforeunload-javascript-event
使用OnBeforeUnload JavaScript事件相关推荐
- javascript事件列表解说
javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...
- javascript事件详细说明
javascript事件列表解说javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触 ...
- javascript事件与event对象的属性
javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...
- 精通JavaScript事件.详解
事件(上) JavaScript事件列表 事件 解说 一般事件 onclick 鼠标点击时触发此事件 ondblclick 鼠标双击时触发此事件 onmousedown 按下鼠标时触发此事件 onmo ...
- JavaScript 事件 快速使用入门
目录 JavaScript 事件汇总 添加与绑定事件 oncontextmenu 事件 禁用右击事件 onbeforeunload 事件 JavaScript 事件汇总 事件 描述 onload.on ...
- javascript事件列表解说(转载)
javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...
- javascript --- 事件托付
javascript 之 事件托付 长处:1.提高性能(仅仅须要对父级进行操作,子节点相同会拥有其相关属性和方法) 2.对于新加入的事件.也让其拥有父级事件的属性 <!doctype html& ...
- 【探讨】javascript事件机制底层实现原理
前言 又到了扯淡时间了,我最近在思考javascript事件机制底层的实现,但是暂时没有勇气去看chrome源码,所以今天我来猜测一把 我们今天来猜一猜,探讨探讨,javascript底层事件机制是如 ...
- javaScript事件(二)事件处理程序
一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 前面提到,事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.响应 ...
最新文章
- HDU-3177 Crixalis's Equipment 贪心
- Caffe代码导读(4):数据集准备
- backgroundworder 简单使用
- 计算机数日期,计算机如何计算两个日期之间的天数
- 聚合搜索V2.0泛目录站群二开源码 可做指定关键词
- 洛谷 P1396 营救
- 燃料电池厂商的市场竞争
- 编写kernel第一个Hello World
- H5与客户端交互的方式有哪些? 怎么做?
- The 2014 ACM-ICPC Asia Regional Anshan
- FF的插件iMacros简单交流
- 乌龟git解决冲突_关于git中自己的分支和主分支有冲突的解决方案(git和乌龟git)...
- Android Binder机制介绍
- RNA-seq的典型流程(protocol)
- 王者荣耀签到系统策划案
- python编写MySQL数据库查询/操作软件代码
- 不仅仅是“屠龙之技”-编译器开发者的精神胜利!
- Android软件开发面试题,Android入门
- 【云原生之kubernetes实战】在k8s环境下部署OneNav个人书签工具
- 【改进篇】Python实现VRP常见求解算法——禁忌搜索算法(TS)
热门文章
- JAVA:遍历目录下的文件
- 汇川H2U编程软件 AutoShop下载
- 在Vue框架中通过a标签实现下载本地资源的功能
- 读《Prioritizing disease genes with animproved dual label propagation framework》
- 使用电信光猫+华为路由器实现内网穿透,外网访问内网 之 路由器配置(华为路由WS5200 增强版)
- 1小时学会 POI 和 EasyExcel (超级详细)
- ECS的简单入门(三):Component
- 豆瓣图书Top250
- Vue.component 讲解
- 用户教程:如何利用商权管理费2.0快速实现消费增值?