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 form action动态修改方法
Nov 04 Javascript
jquery获取tagName再进行判断
May 29 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
Jun 23 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
Aug 07 Javascript
浅谈node.js中async异步编程
Oct 22 Javascript
简单实现JS对dom操作封装
Dec 02 Javascript
jQuery表单验证简单示例
Oct 17 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
Jan 06 Javascript
微信小程序 动态传参实例详解
Apr 27 Javascript
VUE中使用Vue-resource完成交互
Jul 21 Javascript
vue二级路由设置方法
Feb 09 Javascript
微信小程序自定义select下拉选项框组件的实现代码
Aug 28 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的闭合标签“?&gt;”
2014/08/28 PHP
在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析
2016/03/06 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
js/jquery解析json和数组格式的方法详解
2014/01/09 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
js简单抽奖代码
2015/01/16 Javascript
微信小程序 Video API实例详解
2016/10/02 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
2017/01/20 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
2018/09/20 Javascript
element-ui中Table表格省市区合并单元格的方法实现
2019/08/07 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
python完成FizzBuzzWhizz问题(拉勾网面试题)示例
2014/05/05 Python
让Python代码更快运行的5种方法
2015/06/21 Python
Python random模块用法解析及简单示例
2017/12/18 Python
numpy.linspace 生成等差数组的方法
2018/07/02 Python
对python中不同模块(函数、类、变量)的调用详解
2019/07/16 Python
使用django的objects.filter()方法匹配多个关键字的方法
2019/07/18 Python
python 和c++实现旋转矩阵到欧拉角的变换方式
2019/12/04 Python
Window系统下Python如何安装OpenCV库
2020/03/05 Python
Django中使用Json返回数据的实现方法
2020/06/03 Python
HTML5中Localstorage的使用教程
2015/07/09 HTML / CSS
欧洲品牌瓷器餐具网上商店:Porzellantreff.de
2018/04/04 全球购物
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
eHarmony英国:全球领先的认真恋爱约会平台之一
2020/11/16 全球购物
小学教师的个人自我鉴定
2013/10/26 职场文书
消防器材管理制度
2014/01/28 职场文书
三好学生个人先进事迹材料
2014/05/17 职场文书
国际商务专业求职信
2014/07/15 职场文书
学生逃课检讨书
2015/02/17 职场文书
2015年大学生实习评语
2015/03/25 职场文书
终止劳动合同通知书
2015/04/16 职场文书
学校党支部承诺书
2015/04/30 职场文书
2015年工商局个人工作总结
2015/07/23 职场文书
2019年警察入党转正申请书最新范文
2019/09/03 职场文书
Windows10下安装MySQL8
2021/04/06 MySQL