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 相关文章推荐
实现超用户体验 table排序javascript实现代码
Jun 22 Javascript
jQuery隔行变色与普通JS写法的对比
Apr 21 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
May 25 Javascript
JavaScript中的Math.atan2()方法使用详解
Jun 15 Javascript
分享我的jquery实现下拉菜单心的
Nov 29 Javascript
深入分析node.js的异步API和其局限性
Sep 05 Javascript
简单实现JS倒计时效果
Dec 23 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
Sep 27 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
Sep 18 Javascript
jQuery列表动态增加和删除的实现方法
Nov 05 jQuery
element-ui点击查看大图的方法示例
Dec 14 Javascript
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 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
将OICQ数据转成MYSQL数据
2006/10/09 PHP
php学习笔记之 函数声明(二)
2011/06/09 PHP
windows下PHP_intl.dll正确配置方法(apache2.2+php5.3.5)
2014/01/14 PHP
php生成excel文件的简单方法
2014/02/08 PHP
php实现高效获取图片尺寸的方法
2014/12/12 PHP
php中动态调用函数的方法
2015/03/16 PHP
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
浅谈PHP的反射API
2017/02/26 PHP
php smtp实现发送邮件功能
2017/06/22 PHP
PHP设计模式之工厂模式详解
2017/10/24 PHP
jQuery 性能优化指南 (1)
2009/05/21 Javascript
javascript parseInt 大改造
2009/09/27 Javascript
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
jQuery判断指定id的对象是否存在的方法
2015/05/22 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
2015/11/02 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
2017/04/24 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
2019/05/30 Javascript
微信小程序后台持续定位功能使用详解
2019/08/23 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
2019/09/23 Javascript
vue制作抓娃娃机的示例代码
2020/04/17 Javascript
python生成器,可迭代对象,迭代器区别和联系
2018/02/04 Python
pandas.DataFrame.to_json按行转json的方法
2018/06/05 Python
python的json中方法及jsonpath模块用法分析
2019/12/06 Python
浅谈django不使用restframework自定义接口与使用的区别
2020/07/15 Python
python实现ping命令小程序
2020/12/28 Python
七年级数学教学反思
2014/01/22 职场文书
求职信的七个关键技巧
2014/02/05 职场文书
企业文化口号
2014/06/12 职场文书
交通安全责任书范本
2014/07/24 职场文书
新郎结婚保证书
2015/02/26 职场文书
2015年反腐倡廉工作总结
2015/05/14 职场文书
党员干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
学校团代会开幕词
2016/03/04 职场文书
Java并发编程之详解CyclicBarrier线程同步
2021/06/23 Java/Android
Mysql实现简易版搜索引擎的示例代码
2021/08/30 MySQL