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 相关文章推荐
Dojo 学习要点
Sep 03 Javascript
jqGrid jQuery 表格插件测试代码
Aug 23 Javascript
javascript用户注册提示效果的简单实例
Aug 17 Javascript
Jquery操作js数组及对象示例代码
May 11 Javascript
jQuery入门基础知识学习指南
Aug 14 Javascript
AngularJS 过滤与排序详解及实例代码
Sep 14 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
Feb 17 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
Feb 23 Javascript
安装Node.js并启动本地服务的操作教程
May 12 Javascript
使用Angular-CLI构建NPM包的方法
Sep 07 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
Apr 17 Javascript
javascript设计模式之迭代器模式
Jan 30 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
一些花式咖啡的配方
2021/03/03 冲泡冲煮
php实现扫描二维码根据浏览器类型访问不同下载地址
2014/10/15 PHP
ThinkPHP3.2.2实现持久登录(记住我)功能的方法
2016/05/16 PHP
tp5框架基于Ajax实现列表无刷新排序功能示例
2020/02/10 PHP
laravel入门知识点整理
2020/09/15 PHP
setInterval 和 setTimeout会产生内存溢出
2008/02/15 Javascript
js substr、substring和slice使用说明小记
2011/09/15 Javascript
JS取request值以及自动执行使用示例
2014/02/24 Javascript
jquery实现textarea输入框限制字数的方法
2015/01/15 Javascript
jQuery中triggerHandler()方法用法实例
2015/01/19 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
jQuery插件简单实现方法
2015/07/18 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
2015/10/09 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
2015/12/01 Javascript
javascript中apply、call和bind的使用区别
2016/04/05 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
2016/06/21 Javascript
ES6模块化的import和export用法方法总结
2017/08/08 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
2017/10/13 Javascript
微信小程序实现topBar底部选择栏效果
2018/07/20 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
2018/09/19 Javascript
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
Nodejs实现WebSocket代码实例
2020/05/19 NodeJs
JavaScript 实现下雪特效的示例代码
2020/09/09 Javascript
python开启多个子进程并行运行的方法
2015/04/18 Python
利用python爬取散文网的文章实例教程
2017/06/18 Python
Python Tkinter实现简易计算器功能
2018/01/30 Python
Python简单过滤字母和数字的方法小结
2019/01/09 Python
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
python用分数表示矩阵的方法实例
2021/01/11 Python
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
Java面向对象面试题
2016/12/26 面试题
物业管理专业求职信
2014/06/11 职场文书
维稳工作情况汇报
2014/10/27 职场文书
优秀班主任推荐材料
2014/12/17 职场文书
幼儿园教师培训心得体会
2016/01/21 职场文书