IE在iframe中后退无法触发onhashchange事件
url中的hash最常用到的地方就是锚点,随着单页面应用(SPA)的盛行,利用浏览器的前进后退能触发onhashchange事件且不刷新页面的特性,hash也被用做了路由,当然也可使用HTML5的History来实现,但为了兼容低版本IE浏览器很多时候还是选择了hash。
onhashchange在IE中的问题
正常情况下hash是不会存在兼容性问题,但是到了IE中(包括IE6-11)的iframe中问题就来了:点击浏览器的后退或者执行history.back()
都无法触发onhashchange
事件,通过location.href
查看其值并未发生变化,所以我认为没有触发onhashchange
事件是因为这个原因导致。
解决IE中onhashchange事件不触发
其实我并没有找到解决这个问题的方法,只是找到了一个替代方案。在iframe中后退location.href
可能不会发生变化,但document.URL
这个值是一定会变的。根据这个特性就可以对代码做些改进。 对于非IE浏览器可以通过location.hash
来取hash值,对于IE可以在document.URL
的取得。
function getHash() {
if (isIE) {
return document.URL.substr(document.URL.indexOf('#') + 1);
} else {
return location.hash;
}
}
由于onhashchange
在IE中不能触发,所以我们需要通过其他事件间接触发
function hashBack() {
history.back();
if (that.isIE) {
location.hash = that.getHash();
hashchangeEventFn();
}
}
window.onhashchange = hashchangeEventFn;
给后退按钮添加一个click
事件,当点击时触发hashBack
方法,在hashchangeEventFn
方法中通过getHash
方法获取hash值。
解决方法不足之处
上面的方法虽然可行,但也存在问题,如点击浏览器的后退按钮依然不能触发hashchangeEventFn
方法。如果页面要求不高还是可以使用上面的方法。 如果上面方法不能满足你的需要,也可以使用定时器来定时的获取document.URL
值的变化。