最近做考试系统,一些效果存在一些兼容性问题,尤其是ie6,本人js不是很好,通过查资料解决了这些问题,现总结下:
关于onbeforeunload问题:
考试时离开页面需要提示,但是直接用此方法或onunload,我测试在谷歌浏览器不行。如下代码可解决:
- window.onbeforeunload = function (e) {
- e = e || window.event;
- // For IE and Firefox prior to version 4
- if (e) {
- e.returnValue = '确定退出吗?';
- }
- // For Safari
- return '确定退出吗?';
- };
但是当你需要提交表单时,或者ajax什么的,它也会提示,这样肯定是不行的。于是在页面中加入一个隐藏标签,例如<input type="hidden" id="hidsub" value=""/>
通过获取他的值来判断是否执行onbeforeunload方法。于是代码变成这样:
- window.onbeforeunload = function (e) {
- e = e || window.event;
- var flag = document.getElementById('hidsub').value
- if(!flag){
- if (e) {
- e.returnValue = '确定退出吗?';
- }
- return '确定退出吗?';
- }
- };
当然你要在相应的a标签上加入 onclick="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