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 相关文章推荐
jQuery 获取对象 基本选择与层级
May 31 Javascript
jQuery对象[0]是什么含义?
Jul 31 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
Jul 28 Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 Javascript
JavaScript数组实现数据结构中的队列与堆栈
May 26 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
Aug 18 Javascript
Javascript 实现简单计算器实例代码
Oct 23 Javascript
bootstrap侧边栏圆点导航
Jan 11 Javascript
Angular利用trackBy提升性能的方法
Jan 26 Javascript
微信小程序绘制图片发送朋友圈
Jul 25 Javascript
解决vue项目运行npm run serve报错的问题
Oct 26 Javascript
vue基于Teleport实现Modal组件
May 31 Vue.js
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写聊天室(四)
2006/10/09 PHP
php中用memcached实现页面防刷新功能
2014/08/19 PHP
[原创]来自ImageSee官方 JavaScript图片浏览器
2008/01/16 Javascript
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
jQuery使用andSelf()来包含之前的选择集
2014/05/19 Javascript
JS实现图片放大镜效果的方法
2015/02/27 Javascript
javascript实现textarea中tab键的缩排处理方法
2015/06/26 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
2016/04/26 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
JS控制TreeView的结点选择
2016/11/11 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
2017/04/13 Javascript
ionic实现底部分享功能
2017/05/11 Javascript
JavaScript字符串检索字符的方法
2017/06/23 Javascript
Vue中 key keep-alive的实现原理
2018/09/18 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
2019/01/21 Javascript
浅析vue插槽和作用域插槽的理解
2019/04/22 Javascript
关于vue 结合原生js 解决echarts resize问题
2020/07/26 Javascript
vue 动态添加class,三个以上的条件做判断方式
2020/11/02 Javascript
[36:41]完美世界DOTA2联赛循环赛FTD vs Magma第一场 10月30日
2020/10/31 DOTA
python中的一些类型转换函数小结
2013/02/10 Python
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
python的pip安装以及使用教程
2018/09/18 Python
python程序中的线程操作 concurrent模块使用详解
2019/09/23 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
python异常处理之try finally不报错的原因
2020/05/18 Python
Python 使用xlwt模块将多行多列数据循环写入excel文档的操作
2020/11/10 Python
python画图时设置分辨率和画布大小的实现(plt.figure())
2021/01/08 Python
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
2012/11/13 HTML / CSS
canvas需要在标签里直接定义宽高
2014/12/17 HTML / CSS
高中毕业自我评价
2014/02/08 职场文书
生物工程专业求职信
2014/09/03 职场文书
三方股东合作协议书
2014/10/28 职场文书
飞越疯人院观后感
2015/06/09 职场文书
2019学子的答谢词范本!
2019/07/05 职场文书
2020优秀员工演讲稿(三篇)
2019/10/17 职场文书