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 相关文章推荐
按Enter键触发事件的jquery方法实现代码
Feb 17 Javascript
封装了一个支持匿名函数的Javascript事件监听器
Jun 05 Javascript
JavaScript中的数组操作介绍
Dec 30 Javascript
理解JavaScript表单的基础知识
Jan 25 Javascript
第一次接触神奇的前端框架vue.js
Dec 01 Javascript
微信公众号菜单配置微信小程序实例详解
Mar 31 Javascript
laydate日历控件使用方法详解
Nov 20 Javascript
webpack打包react项目的实现方法
Jun 21 Javascript
Vue.js的动态组件模板的实现
Nov 26 Javascript
layui富文本编辑器前端无法取值的解决方法
Sep 18 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
Oct 16 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
Jul 27 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的switch判断语句的“高级”用法详解
2014/10/01 PHP
Zend Framework教程之响应对象的封装Zend_Controller_Response实例详解
2016/03/07 PHP
php连接微软MSSQL(sql server)完全攻略
2016/11/27 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
asp javascript 实现关闭窗口时保存数据的办法
2007/11/24 Javascript
jQuery的12招常用技巧分享
2011/08/08 Javascript
JavaScript中的View-Model使用介绍
2011/08/11 Javascript
jQuery随机切换图片的小例子
2013/04/18 Javascript
JS倒计时代码汇总
2014/11/25 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
2015/03/05 Javascript
jQuery.each使用详解
2015/07/07 Javascript
全面解析Bootstrap手风琴效果
2020/04/17 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
2016/06/17 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
2016/11/24 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
2017/08/16 Javascript
4个顶级开源JavaScript图表库
2018/09/29 Javascript
详解从NodeJS搭建中间层再谈前后端分离
2018/11/13 NodeJs
swiper.js插件实现pc端文本上下滑动功能示例
2018/12/03 Javascript
在vue中动态添加class类进行显示隐藏实例
2019/11/09 Javascript
[04:44]DOTA2 2017全国高校联赛视频回顾
2017/08/21 DOTA
python logging模块书写日志以及日志分割详解
2019/07/22 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
浅谈TensorFlow之稀疏张量表示
2020/06/30 Python
Html5元素及基本语法详解
2016/08/02 HTML / CSS
HTML5 FileReader对象的具体使用方法
2020/05/22 HTML / CSS
英国最大的奢侈品零售网络商城:Flannels
2016/09/16 全球购物
巴西网上药房:onofre
2016/11/21 全球购物
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
师范大学应届生求职信
2013/11/21 职场文书
导游实习生自荐书
2014/01/28 职场文书
机关门卫制度
2014/02/01 职场文书
2015年汽车销售经理工作总结
2015/04/27 职场文书
幼儿园辞职信
2015/05/13 职场文书
如何用JS实现网页瀑布流布局
2021/04/24 Javascript
Navicat连接MySQL错误描述分析
2021/06/02 MySQL
Python中npy和mat文件的保存与读取
2022/04/24 Python