做考试系统用到的关于onbeforeunload一些兼容性问题

最近做考试系统，一些效果存在一些兼容性问题，尤其是ie6，本人js不是很好，通过查资料解决了这些问题，现总结下：

关于onbeforeunload问题：

考试时离开页面需要提示，但是直接用此方法或onunload，我测试在谷歌浏览器不行。如下代码可解决：

 

[javascript]  view plain copy

 

1. window.onbeforeunload = function (e) {   
2.     e = e || window.event;   
3.     // For IE and Firefox prior to version 4   
4.     if (e) {   
5.     e.returnValue = '确定退出吗？';   
6.     }   
7.     // For Safari   
8.     return '确定退出吗？';   
9. };   

但是当你需要提交表单时，或者ajax什么的，它也会提示，这样肯定是不行的。于是在页面中加入一个隐藏标签，例如<input type="hidden" id="hidsub" value=""/>

 

通过获取他的值来判断是否执行onbeforeunload方法。于是代码变成这样：

 

[javascript]  view plain copy

 

1. window.onbeforeunload = function (e) {   
2.      e = e || window.event;   
3.      var flag = document.getElementById('hidsub').value  
4.      if(!flag){  
5.         if (e) {   
6.            e.returnValue = '确定退出吗？';   
7.         }   
8.         return '确定退出吗？';   
9.      }  
10.  };   

当然你要在相应的a标签上加入 οnclick="document.getElementById('hidsub').value='1';func();"让隐藏域获取到值，这样就不会执行onbeforeunload了。

 

还有问题！一般我们做一些点击事件会在a标签加上href='javascript:void(0);' 在ie下，onbeforeunload也会执行。具体我也不说了，网上可以查到很多。

这时如果换成href='#'就不会执行了，但是会跳到锚点，这也是不行的。可以改成href='###'或href='#this'。还可以在a标签onclick事件里加入return false;来阻止onbeforeunload。

另外还有一个问题，就是iframe里如果刷新父页面使用parent.location.reload();会在firefox里造成死循环。这时只需改成parent.location.reload(true);就可以了。

 

原文：http://blog.csdn.net/ameol/article/details/9021071