奇葩のbeforeunload

Posted 2020-07-20 web前端皇家魔法学院

（一如既往的出现）

写前面

被坑到 对于这个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:;？就徒个手势鼠标的方便？

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