如何让hashchange事件在所有浏览器(包括IE7)中运行?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (19)

我有一些代码(由另一个开发者编写的),当你点击一个导航项时,AJAX会在WordPress内部进行AJAX页面加载(例如,无页面重新加载),AJAX会刷新主要内容区域。我的问题是它在IE7中被破坏了,我不知道从哪里开始调试。

原来的是

var queue = 0;

$('document').ready(function() {
    window.addEventListener("hashchange", hashChange, false);

    // Define window location variables
    var windowHost = window.location.host,
        windowHash = window.location.hash,
        windowPath = window.location.pathname;

但是,我改变了他们的addEventListener条件是基于该方法是否存在。一些研究告诉我,该方法在旧版本的IE中不可用(例如,在我的例子中为7)。另外,IE7调试控制台确定这是一种不可用的方法,所以这很清楚。我重写了以下代码行,但代码仍然不起作用:

var queue = 0;

$('document').ready(function() {
    if(window.addEventListener) {
        window.addEventListener("hashchange", hashChange, false);
    }
    else if (window.attachEvent) {
        window.attachEvent("hashchange", hashchange, false);    
    }
    // Define window location variables
    var windowHost = window.location.host,
        windowHash = window.location.hash,
        windowPath = window.location.pathname;

提问于
用户回答回答于
  • attachEvent要求事件以前缀on
  • 你有不同的方法大写。更改hashchangeattachEventhashChange获得在IE8工作的事件。
  • 使用建议的实现来支持hashchangeIE7和其他旧浏览器的实现。

我创建了一个跨浏览器的实现,它将这个hashchange功能添加到浏览器中。

//function hashchange  is assumed to exist. This function will fire on hashchange
if (!('onhashchange' in window)) {
    var oldHref = location.href;
    setInterval(function() {
        var newHref = location.href;
        if (oldHref !== newHref) {
            var _oldHref = oldHref;
            oldHref = newHref;
            hashChange.call(window, {
                'type': 'hashchange',
                'newURL': newHref,
                'oldURL': _oldHref
            });
        }
    }, 100);
} else if (window.addEventListener) {
    window.addEventListener("hashchange", hashChange, false);
}
else if (window.attachEvent) {
    window.attachEvent("onhashchange", hashChange);    
}

注意:这段代码对于一个hashchange事件很有用。如果你想添加多个hashchange处理程序,请使用以下方法。 它定义了两个函数,addHashChangeremoveHashChange。两种方法都以函数作为参数。

(function() {
    if ('onhashchange' in window) {
        if (window.addEventListener) {
            window.addHashChange = function(func, before) {
                window.addEventListener('hashchange', func, before);
            };
            window.removeHashChange = function(func) {
                window.removeEventListener('hashchange', func);
            };
            return;
        } else if (window.attachEvent) {
            window.addHashChange = function(func) {
                window.attachEvent('onhashchange', func);
            };
            window.removeHashChange = function(func) {
                window.detachEvent('onhashchange', func);
            };
            return;
        }
    }
    var hashChangeFuncs = [];
    var oldHref = location.href;
    window.addHashChange = function(func, before) {
        if (typeof func === 'function')
            hashChangeFuncs[before?'unshift':'push'](func);
    };
    window.removeHashChange = function(func) {
        for (var i=hashChangeFuncs.length-1; i>=0; i--)
            if (hashChangeFuncs[i] === func)
                hashChangeFuncs.splice(i, 1);
    };
    setInterval(function() {
        var newHref = location.href;
        if (oldHref !== newHref) {
            var _oldHref = oldHref;
            oldHref = newHref;
            for (var i=0; i<hashChangeFuncs.length; i++) {
                hashChangeFuncs[i].call(window, {
                    'type': 'hashchange',
                    'newURL': newHref,
                    'oldURL': _oldHref
                });
            }
        }
    }, 100);
})();
// Usage, infinitely many times:
addHashChange(function(e){alert(e.newURL||location.href);});
用户回答回答于

attachEvent需要两个参数:

bSuccess = object.attachEvent(sEvent, fpNotify)

[IE9以下的所有版本都需要!:(请参阅MDN参考资料

这可以工作:

if(window.addEventListener) {
    window.addEventListener("hashchange", hashChange, false);
}
else if (window.attachEvent) {
    window.attachEvent("onhashchange", hashchange);//SEE HERE...
    //missed the on. Fixed thanks to @Robs answer.
}

当然,如果可能的话,你应该只使用JQuery,因为它封装了所有这些。

扫码关注云+社区