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中关于执行环境的杂谈
Aug 14 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
Sep 28 Javascript
ASP.NET中AJAX 调用实例代码
May 03 Javascript
jQuery的Ajax的自动完成功能控件简要说明
Feb 22 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
Sep 25 Javascript
Jquery响应回车键直接提交表单操作代码
Jul 25 Javascript
BootStrap Validator使用注意事项(必看篇)
Sep 28 Javascript
js正则表达式注册页面表单验证
Oct 11 Javascript
JS作用域深度解析
Dec 29 Javascript
JS+Canvas绘制动态时钟效果
Nov 10 Javascript
JS实现碰撞检测的方法分析
Jan 19 Javascript
javascript-hashchange事件和历史状态管理实例分析
Apr 18 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 数组动态添加实现代码(最土团购系统的价格排序)
2011/12/30 PHP
php echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
利用PHP实现短域名互转
2013/07/05 PHP
常见PHP数据库解决方案分析介绍
2015/09/24 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
JavaScript版代码高亮
2006/06/26 Javascript
jQuery DOM操作小结与实例
2010/01/07 Javascript
利用window.name实现windowStorage代码分享
2014/01/02 Javascript
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
JavaScript中常见的字符串操作函数及用法汇总
2015/05/04 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
2016/08/02 Javascript
浅析Ajax语法
2016/12/05 Javascript
微信小程序新增的拖动组件movable-view使用教程
2017/05/20 Javascript
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
react中使用swiper的具体方法
2018/05/15 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
2019/04/08 Javascript
Vue起步(无cli)的啊教程详解
2019/04/11 Javascript
JavaScript实现复选框全选和取消全选
2020/11/20 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
[05:34]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY第二弹
2014/06/25 DOTA
Python数据结构与算法之图的最短路径(Dijkstra算法)完整实例
2017/12/12 Python
Python中static相关知识小结
2018/01/02 Python
对Python中实现两个数的值交换的集中方法详解
2019/01/11 Python
Python脚本导出为exe程序的方法
2020/03/25 Python
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
智能钱包:Ekster
2019/11/21 全球购物
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
高三学生评语大全
2014/04/25 职场文书
党支部换届选举方案
2014/05/08 职场文书
科技工作者先进事迹
2014/08/16 职场文书
工作证明范本(2篇)
2014/09/14 职场文书
乡镇党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2015年创先争优活动总结
2015/03/27 职场文书
javascript拖曳互换div的位置实现示例
2021/06/28 Javascript