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预加载图片、css、js的方法示例介绍
Oct 14 Javascript
Jquery跳到页面指定位置的方法
May 12 Javascript
jQuery中wrapInner()方法用法实例
Jan 16 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
Mar 13 Javascript
基于Bootstrap仿淘宝分页控件实现代码
Nov 07 Javascript
Javascript 两种刷新方法以及区别和适用范围
Jan 17 Javascript
Bootstrap table表格简单操作
Feb 07 Javascript
ES6 javascript中Class类继承用法实例详解
Oct 30 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
May 13 Javascript
微信小程序scroll-view点击项自动居中效果的实现
Mar 25 Javascript
vue addRoutes路由动态加载操作
Aug 04 Javascript
JavaScript实现简单动态表格
Dec 02 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 设计模式之 单例模式
2008/12/19 PHP
PHP+JS三级菜单联动菜单实现方法
2016/02/24 PHP
php mysql数据库操作类(实例讲解)
2017/08/06 PHP
简单实用的PHP文本缓存类实例
2019/03/22 PHP
简单的js分页脚本
2009/05/21 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
2010/08/01 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
2012/05/23 Javascript
jQuery实现长文字部分显示代码
2013/05/13 Javascript
JQuery以JSON方式提交数据到服务端示例代码
2014/05/05 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
玩转JavaScript OOP - 类的实现详解
2016/06/08 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
jQuery简介_动力节点Java学院整理
2017/07/04 jQuery
vue项目添加多页面配置的步骤详解
2019/05/22 Javascript
js实现滚动条自动滚动
2020/12/13 Javascript
python使用phoenixdb操作hbase的方法示例
2019/02/28 Python
python分布式编程实现过程解析
2019/11/08 Python
Python+OpenCV实现将图像转换为二进制格式
2020/01/09 Python
TensorFlow命名空间和TensorBoard图节点实例
2020/01/23 Python
如何拷贝一整个Java对象,包括它的状态
2013/12/27 面试题
企业办公室主任岗位职责
2014/02/19 职场文书
公司总经理工作职责管理办法
2014/02/28 职场文书
开学典礼主持词
2014/03/19 职场文书
工伤事故赔偿协议书
2014/04/15 职场文书
《梅花魂》教学反思
2014/04/30 职场文书
产品设计开发计划书
2014/05/07 职场文书
镇政府副镇长群众路线专题民主生活会对照检查材料
2014/09/19 职场文书
班子成员四风问题自我剖析材料
2014/09/29 职场文书
环卫工人慰问信
2015/02/15 职场文书
中标通知书范本
2015/04/17 职场文书
大学体育课感想
2015/08/10 职场文书
辞职申请书范本
2019/05/20 职场文书
python numpy中multiply与*及matul 的区别说明
2021/05/26 Python
使用Python+OpenCV进行卡类型及16位卡号数字的OCR功能
2021/08/30 Python