最近项目中出现个bug,就是导出数据后,会提示确认导航,其实实际需求并不需要这个提示,可能是之前遗留的问题。查了下资料是在触发了onbeforeunload事件,那么剩下的就是代码组织问题了。

众所周知,现在的主流浏览器基本上都是多标签页的。在标签页数量较多的时候,可能连标签页的标题都无法看清。因此,用户可能一不小心就关错了标签 页,或者直接点击浏览器右上角的关闭按钮一不小心就关闭了所有标签页,而用户之前访问我们站点的某个页面可能还有非常重要的数据没有保存。。。

因此,在某些重要数据的录入页面,或者在某些包含重要操作的页面,我们有必要为这些网页添加在关闭页面前弹出确认提示窗口,以免用户不慎关闭网页导致重要数据丢失。

下面,我们就直接参考示例代码吧。

  1. //在关闭页面时弹出确认提示窗口
  2. window.onbeforeunload = function(event){
  3. return '您可能有数据没有保存';
  4. };

注意:由于onbeforeunload事件并不是W3C规范的标准事件,因此并不是所有的浏览器厂商都支持该事件。到目前为止,IE、FireFox、Chrome等浏览器均支持onbeforeunload事件,Opera浏览器不支持该事件。

在页面的JavaScript脚本中加入上述代码之后,当我们关闭该网页时,可以看到如下所示的提示效果。

IE浏览器关闭页面前的提示信息

火狐浏览器关闭页面前的提示信息

Chrome浏览器关闭页面前的提示信息

此外,如果你的当前页面引入了jQuery,那么你会发现onbeforeunload事件将可能无效,你必须以jQuery的方式来注册该事件,代码如下:

  1. //在关闭页面时弹出确认提示窗口
  2. $(window).bind('beforeunload', function(){
  3. return '您可能有数据没有保存';
  4. });

强烈注意:使用上面的代码之后,你会发现beforeunload事件会在导致当前页面被销毁的任何情况下触发,比如:刷新该页面、关闭当前选项卡、关闭浏览器,甚至当你点击该页面上的外部链接、提交该页面上的表单数据时,都会触发beforeunload事件。这当然不是我们所希望看到的,我们希望的可能是,在提交该页面上表单的时候不弹出确认提示框,或者点击该页面上的外部链接也不弹出提示框。

这个时候,我们应该怎么做呢?很明显,我们需要增加一个条件判断,从而判断当用户的操作符合某些条件时才弹出确认提示框。下面,我们以基于jQuery的代码为例,来编写具体的代码:

  1. // 关闭窗口时弹出确认提示
  2. $(window).bind('beforeunload', function(){
  3. // 只有在标识变量is_confirm不为false时,才弹出确认提示
  4. if(window.is_confirm !== false)
  5. return '您可能有数据没有保存';
  6. });

在上面的代码中,我们增加了一个全局变量is_confirm来作为条件判断变量,只要该变量不为false时,才弹出确认提示框。当然,我们还需要添加一些代码来控制该变量,以确保在不希望弹出确认提示框的地方,不会弹出确认提示框。例如,我们希望在提交表单的时候,不弹出确认提示框。

  1. // 提交表单时,不弹出确认提示框
  2. $('form').bind('submit', function(){
  3. is_confirm = true;
  4. });

如果我们希望当用户进行提交表单、点击链接等页面内的任何跳转操作时都不弹出提示框,只有在点击标签页的关闭按钮或者浏览器的关闭按钮时才弹出确认提示框,那么我们该如何编写代码呢?由于标签页关闭按钮和浏览器关闭按钮均在页面以外,用户点击关闭按钮都需要将鼠标移动到页面以外的位置,因此我们可以通过鼠标的位置来进行判断。此外,我们也无需去时刻获取鼠标位置,我们只需要给当前页面的window对象(或body、外层容器等元素)注册mouseovermouseleave事件即可。

  1. //页面内的跳转操作均不弹出确认窗口
  2. $(window).bind('mouseover mouseleave', function(event){
  3. is_confirm = event.type == 'mouseleave';
  4. });

下面就以页面内的元素均不弹出确认提示窗口为例,编写一次完成的示例代码(基于jQuery):

    1. (function(){
    2. // 关闭窗口时弹出确认提示
    3. $(window).bind('beforeunload', function(){
    4. // 只有在标识变量is_confirm不为false时,才弹出确认提示
    5. if(window.is_confirm !== false)
    6. return '您可能有数据没有保存';
    7. })
    8. // mouseleave mouseover事件也可以注册在body、外层容器等元素上
    9. .bind('mouseover mouseleave', function(event){
    10. is_confirm = event.type == 'mouseleave';
    11. });
    12. })();

js在关闭页面前弹出确认提示【转载】的更多相关文章

  1. JavaScript:用JS实现加载页面前弹出模态框

    用JS实现加载页面前弹出模态框 主要的JavaScript 代码是: <script> //加载模态框 $('#myModal').modal(); $(document).ready(f ...

  2. [转]js中confirm实现执行操作前弹出确认框的方法

    原文地址:http://www.jb51.net/article/56986.htm 本文实例讲述了js中confirm实现执行操作前弹出确认框的方法.分享给大家供大家参考.具体实现方法如下: 现在在 ...

  3. 【Vue | ElementUI】Vue离开当前页面时弹出确认框实现

    Vue离开当前页面时弹出确认框实现 1. 实现目的 在某种业务场景下,用户不允许跳转到其他页面.于是,需要在用户误操作或者是点击浏览器跳转时提示用户. 2. 实现原理 使用路由守卫beforeRout ...

  4. [UWP]在应用退出时弹出确认提示框

    1. 需求 在应用退出时(点击右上角的关闭按钮)弹出一个确认按钮可以说是一个最常见的操作了,例如记事本的"你是否保存": 但这个功能在UWP上居然有点小复杂.这篇文章将解释如何实现 ...

  5. Asp.Net下载页面,并弹出下载提示框

    Asp.Net下载页面,并弹出下载提示框.在删除按钮里调用以下方法.

  6. Asp.Net后台弹出确认提示窗Confirm

    前端js代码: function MyConfirm(message, guid) { if (confirm(message) == true) { document.getElementById( ...

  7. javascript使浏览器关闭前弹出确认

    当用户关闭页面时,弹出对话框,让用户确认是否关闭,选择确定则页面关闭,否则页面不关闭. 效果体验:http://keleyi.com/keleyi/phtml/js/index.htm 完整代码: & ...

  8. [JS] 点击按钮触发后台事件前,弹出确认框

    只需要在button中设置onclick属性触发事件即可 下面以ASP.NET代码为例, ASP.NET中按钮客户端触发js代码的属性是OnClientClick <asp:Button ID= ...

  9. 无敌JS关闭当前窗口代码,不弹出确认提示

    echo "<script type='text/javascript'>window.opener=null;window.open('','_self');window.cl ...

随机推荐

  1. Jquery中获取iframe的代码方法

    父窗口中操作iframe:window.frames["iframeChild"].document //假如iframe的id为iframeChild 在子窗口中操作父窗口:wi ...

  2. javascript-无间缝滚动,封装

    原生javascript-无间缝滚动,封装 目前支持的是竖向与横向滚动 http://lgyweb.com/marScroll/ 现在分析下无间缝实现的基本思路(竖向例子): HTML结构: 1 &l ...

  3. Getting Started with Core Data

    Getting Started with Core Data Getting Started with Core Data Coreframework支持创建对象模型封装你的应用数据和逻辑满足MVC设 ...

  4. js 冒泡 捕获

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> ...

  5. 更好的抽屉效果(ios)

    昨天项目基本没啥事了,晚上早早的就回家了,躺在床上无聊地玩着手机(Android的),在清理系统垃圾时被一个“360手机助手”给吸引了, 其实我是被它的那个抽屉效果给吸引了,此时你也许会觉得我out了 ...

  6. Google photos -- reverse thinking

    As a hacker, do the hacking. Here I mean the [hacker](http://en.wikipedia.org/wiki/Hacker_(term) ) . ...

  7. VS2012下基于Glut 矩阵变换示例程序:

    也可以使用我们自己的矩阵运算来实现OpenGL下的glTranslatef相应的旋转变换.需要注意的是OpenGL下的矩阵是列优先存储的. 示例通过矩阵运算使得圆柱或者甜圈自动绕Y轴旋转,可以单击鼠标 ...

  8. 方法输出C++输出斐波那契数列的几种方法

    PS:今天上午,非常郁闷,有很多简单基础的问题搞得我有些迷茫,哎,代码几天不写就忘.目前又不当COO,还是得用心记代码哦! 定义: 斐波那契数列指的是这样一个数列:0, 1, 1, 2, 3, 5, ...

  9. openstack中的floating ip与阿里云的公网ip

    项目组因业务需求使用openstack搭建了一个私有云,本想在vm上搭建一个ftp.源是vsftpd.所有配置都完成了,在远程登录的时候却出现了 这个问题. 初一看以为是文件夹权限的问题,可上上下下全 ...

  10. html标签详解,html标签属性大全(完美版),包括css属性详解

    这个是平时放在笔记里,需要什么了,查下当字典用,想不起来了就查下,个人在用有道云,查询框一输就找到了.下篇会把我整理手机的html5发了.引用在某处常看到的话.楼主耗时费心整理··请拿走······· ...