大魔导师戴戴戴の博文 转载请保留原文链接!

奇葩のbeforeunload

(一如既往的出现)

写前面

被坑到 对于这个beforeunload 还是来一篇博文吧

 

一般的事件 对它返回某个值 都是用来阻止浏览器的一些默认行为 或者 阻止本身接下来操作的

但是 这个beforeunload是个奇葩 它的返回值 帮宁噶不一样!

当点了关闭 刷行 后退 重定向的时候 浏览器就会弹一个窗口 其中的文字说明就是返回值的值

比如 现在要实现 刷新后跳出消息窗口  然后触发了某个操作后 就不弹出消息窗口了 直接跳转

 如下

<a href="javascript:;" id="a">btn</a>
var k;
    onbeforeunload = function(){
        if(k) return;
        return 6666;
    }
    onload = function(){
        a.onclick = function(e){
            k=1;
            location.href = 'http://www.baidu.com';
        }
    }

刷新之后 窗口的消息是6666 点了btn后就直接跳转链接了 没有任何问题(几乎所有浏览器)

接着对click事件修改 如下

a.onclick = function(e){
        setTImeout(function(){
            k=1;
            location.href = 'http://www.baidu.com';
        },2333)
        
    }

点了按钮后 2秒后跳转 是这样的没错。。。但是 ie 8 9 10 统统是直接跳出弹出消息6666!再过2秒后跳转!

问题出在哪里?

href="javascript:;"

这种写法ie 7 8 9 10 统统没用 也就是说并没有取消href的默认跳转

所以执行顺序是click->unload->setTimeout->unload->。。

知道问题就好解决了

针对ie 加上event.returnValue = false 这就解决了  !

可是等等。。

这问题到底是谁的锅?使用event.returnValue确实可以解决 但是它出现在了它不该出现的地方

对于这个不需要任何链接的按钮为什么要用a标签?并且还使用了有兼容问题的 javascript:;?就徒个手势鼠标的方便?

要吐槽的太多 对于会出现以上问题的页面 需要重构的地方会多到数不清。 洗洗睡。。

 

posted @ 2016-06-04 04:57  戴戴戴x  阅读(314)  评论(0编辑  收藏  举报