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 相关文章推荐
js+css实现上下翻页相册代码分享
Aug 18 Javascript
基于jQuery实现返回顶部实例代码
Jan 01 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
May 23 Javascript
AngularJS 如何在控制台进行错误调试
Jun 07 Javascript
Easyui使用Dialog行内按钮布局的实例
Jul 27 Javascript
为输入框加入数字js校验代码分享
Nov 02 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
Dec 20 Javascript
js 图片转base64的方式(两种)
Apr 24 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
Apr 16 Javascript
深入了解js原型模式
May 30 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
Nov 06 Javascript
JavaScript 严格模式(use strict)用法实例分析
Mar 04 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
一个显示天气预报的程序
2006/10/09 PHP
ThinkPHP查询返回简单字段数组的方法
2014/08/25 PHP
Yii入门教程之Yii安装及hello world
2014/11/25 PHP
PHP速成大法
2015/01/30 PHP
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
PHP实现上一篇下一篇的方法实例总结
2016/09/22 PHP
javascript字典探测用户名工具
2006/10/05 Javascript
[原创]静态页面也可以实现预览 列表不同的显示方式
2006/10/14 Javascript
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
2008/12/25 Javascript
JS 毫秒转时间示例代码
2013/09/22 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
2015/10/08 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
2016/06/21 Javascript
Angular 常用指令实例总结整理
2016/12/13 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
2017/06/11 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
2019/10/14 Javascript
element-ui table组件如何使用render属性的实现
2019/11/04 Javascript
python完成FizzBuzzWhizz问题(拉勾网面试题)示例
2014/05/05 Python
python实现ipsec开权限实例
2014/11/11 Python
Python实现的redis分布式锁功能示例
2018/05/29 Python
用Python编写一个简单的CS架构后门的方法
2018/11/20 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
Python itertools.product方法代码实例
2020/03/27 Python
详解Django中views数据查询使用locals()函数进行优化
2020/08/24 Python
茵宝(Umbro)英国官方商店:英国足球服装生产商
2016/12/29 全球购物
Daniel Wellington官方海外旗舰店:丹尼尔惠灵顿DW手表
2018/02/22 全球购物
Nanushka官网:匈牙利服装品牌
2019/08/14 全球购物
教师党员思想汇报
2014/01/06 职场文书
单位一把手群众路线四风问题整改措施
2014/09/25 职场文书
离婚财产分隔协议书
2014/10/23 职场文书
情况说明书格式及范文
2019/06/24 职场文书
七年级作文之环保作文
2019/10/17 职场文书
Window server中安装Redis的超详细教程
2021/11/17 Redis