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 相关文章推荐
this[] 指的是什么内容 讨论
Mar 24 Javascript
jQuery chili图片远处放大插件
Nov 30 Javascript
jquery中防刷IP流量软件影响统计的一点对策
Jul 10 Javascript
JS获取页面窗口大小的代码解读
Dec 01 Javascript
Js点击弹出下拉菜单效果实例
Aug 12 Javascript
通过js来制作复选框的全选和不选效果
May 22 Javascript
js打造数组转json函数
Jan 14 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
May 06 Javascript
jquery判断类型是不是number类型的实例代码
Oct 07 Javascript
关于vue-router路径计算问题
May 10 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
对vue中v-on绑定自定事件的实例讲解
Sep 06 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
修改php.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
PHP实现获取FLV文件的时间
2015/02/10 PHP
WordPress中用于创建以及获取侧边栏的PHP函数讲解
2015/12/29 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
php利用imagemagick实现复古老照片效果实例
2017/02/16 PHP
javascript instanceof 内部机制探析
2010/10/15 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
2012/12/10 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
2013/06/24 Javascript
js中arguments的用法(实例讲解)
2013/11/30 Javascript
网页右侧悬浮滚动在线qq客服代码示例
2014/04/28 Javascript
Javascript中的getUTCHours()方法使用详解
2015/06/10 Javascript
jQuery 中的 DOM 操作
2016/04/26 Javascript
深入浅析JavaScript中with语句的理解
2016/05/12 Javascript
Bootstrap CSS布局之图像
2016/12/17 Javascript
bootstarp modal框居中显示的实现代码
2017/02/18 Javascript
Bootstrap导航中表单简单实现代码
2017/03/06 Javascript
vue拦截器Vue.http.interceptors.push使用详解
2017/04/22 Javascript
详谈js模块化规范
2017/07/07 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
2018/08/08 jQuery
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
2019/05/13 Javascript
vue分页器组件编写方法详解
2019/06/28 Javascript
Vue中多元素过渡特效的解决方案
2020/02/05 Javascript
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
git进行版本控制心得详谈
2017/12/10 Python
详解Python with/as使用说明
2018/12/13 Python
详解Python3 基本数据类型
2019/04/19 Python
Python socket聊天脚本代码实例
2020/01/02 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
Tory Burch德国官网:美国时尚生活品牌
2018/01/03 全球购物
面向对象编程是如何提高软件开发水平的
2014/05/06 面试题
无工作证明怎么写
2015/06/15 职场文书
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技
Python实现Hash算法
2022/03/18 Python