奇葩の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:;?就徒个手势鼠标的方便?
要吐槽的太多 对于会出现以上问题的页面 需要重构的地方会多到数不清。 洗洗睡。。