js在关闭页面前弹出确认提示【转载】

最近项目中出现个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、外层容器等元素)注册mouseover、mouseleave事件便可。

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. })();