小虾虎鱼

小虾虎鱼

IE在iframe中后退无法触发onhashchange事件

作者 禾惠 发表于 2016/11/01 12:53 ,最后修改于 2016/11/01 12:53

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值的变化。

我欣赏你的好品味~

打开支付宝扫一扫