js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)


Posted in Javascript onJuly 18, 2015

本文实例讲述了js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)。分享给大家供大家参考。具体如下:

用户离开页面前,提示是否离开此页面(包括浏览器按钮事件)

<script type="text/javascript">
window.onbeforeunload = function(){
return "您的文章尚未保存!";
}
</script>

如果在退出页面时需要弹出对话框,提示用户将要退出页面,类似当设置某个功能时而没有保存页面。这个实现的方法比较简单,最常见的就是使用unload事件,但这种实现有一个缺点,就是不管同意与否,结果还是一样,会退出页面,因此,如果要弹出对话框,就有用户可选择的空间,如果确定则退出,否则就不关闭页面

这里推荐使用onbeforeunload()事件,意思就是在加载unload事件前执行的方法,使用如下:

<script type="text/javascript">
  window.onbeforeunload = function(){
  return "必您确定要退出页面吗?";
  }
</script>

这样就会弹出一个对话框,只有确认将会退出页面。

window.onbeforeunload可结合jQuery实现当用户设置页面而没有保存的提示效果,也就是如果已保存则不应该提示出对话框,可使用如下方法,当不需要

提示对话框:

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

这样就会直接退出页面,而不会弹出任何对话框。

结合jQuery实现Javascript退出页面弹出对话框就是结合上面两种方法,当页面满足某种情况后,如果需要弹出对话框则弹出,否则不弹出对话框,这样就非常的方便,jQuery有自身的unload方法,但同样不能实现返回,只有一种结果,那就是退出页面,因此,结合window.onbeforeunload 将能实现一个退出页面弹出对话框的功能。

PS:这里再为大家提供一个关于JS事件的在线工具,归纳总结了JS常用的事件类型与函数功能:

javascript事件与功能说明大全:

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
Nov 16 Javascript
js滚动条回到顶部的代码
Dec 06 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
Mar 14 Javascript
Extjs407 getValue()和getRawValue()区别介绍
May 21 Javascript
GRID拖拽行的实例代码
Jul 18 Javascript
js+div实现图片滚动效果代码
Feb 10 Javascript
调试代码导致IE出错的避免方法
Apr 04 Javascript
微信小程序 数据访问实例详解
Oct 08 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
Apr 25 Javascript
es6学习笔记之Async函数的使用示例
May 11 Javascript
Vue动态生成表格的行和列
Jul 18 Javascript
javascript实现贪吃蛇小练习
Jul 05 Javascript
JQuery中ajax方法访问web服务实例
Jul 18 #Javascript
JavaScript实现模仿桌面窗口的方法
Jul 18 #Javascript
js实现固定显示区域内自动缩放图片的方法
Jul 18 #Javascript
javascript顺序加载图片的方法
Jul 18 #Javascript
javascript字符串循环匹配实例分析
Jul 17 #Javascript
动态加载jQuery的两种方法实例分析
Jul 17 #Javascript
javascript父子页面通讯实例详解
Jul 17 #Javascript
You might like
php获取微信基础接口凭证Access_token
2018/08/23 PHP
javascript读取xml
2006/11/04 Javascript
通过JAVAScript实现页面自适应
2007/01/19 Javascript
优化javascript的执行速度
2010/01/23 Javascript
js操作ajax返回的json的注意问题!
2010/02/23 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
2012/12/28 Javascript
早该知道的7个JavaScript技巧
2013/03/27 Javascript
onmouseover和onmouseout的一些问题思考
2013/08/14 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
javascript检测是否联网的实现代码
2014/09/28 Javascript
javascript事件模型实例分析
2015/01/30 Javascript
js数组依据下标删除元素
2015/04/14 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
微信小程序methods中定义的方法互相调用的实例代码
2018/08/07 Javascript
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
vue-cli项目修改文件热重载失效的解决方法
2018/09/19 Javascript
vue多层嵌套路由实例分析
2019/03/19 Javascript
关于Layui Table隐藏列问题
2019/09/16 Javascript
[01:22:19]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
[01:04:02]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第二场 1月24日
2021/03/11 DOTA
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
Python基于TCP实现会聊天的小机器人功能示例
2018/04/09 Python
python实现机器学习之元线性回归
2018/09/06 Python
深入理解Python异常处理的哲学
2019/02/01 Python
Django页面数据的缓存与使用的具体方法
2019/04/23 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
决策树剪枝算法的python实现方法详解
2019/09/18 Python
快速解决jupyter启动卡死的问题
2020/04/10 Python
Python Selenium破解滑块验证码最新版(GEETEST95%以上通过率)
2021/01/29 Python
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
英国现代、当代和设计师家具店:Furntastic
2020/07/18 全球购物
如何将整数int转换成字串String
2014/03/21 面试题
培训主管岗位职责
2014/02/01 职场文书
机关单位保密工作责任书
2015/05/11 职场文书
2015年统计员个人工作总结
2015/07/23 职场文书
Javascript之datagrid查询详解
2021/09/15 Javascript