获取hashchange事件以在所有浏览器(包括IE7)中运行 [英] Get the hashchange event to work in all browsers (including IE7)

问题描述

当您单击导航项时，我有一些代码(由另一位开发人员编写)正在WordPress内进行AJAX页面加载(例如，没有页面重新加载)，AJAX刷新了主要内容区域.我的问题是，它在IE7中已损坏，并且我不知道从调试开始的地方.

I have some code (written by another developer) that is doing AJAX page loading inside of WordPress (e.g. no page reloads) when you click a nav item, AJAX refreshes the primary content area. My problem is that it's broken in IE7 and I have no idea where to start in terms of debugging.

原来的开头是

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调试控制台将其标识为不可用的方法，因此非常清楚.我将这些行重写如下，但是代码仍然无法正常工作:

But I changed them to make the addEventListener conditional on the basis of whether that method was present or not. Some research told me that the method is not available in older versions of IE (e.g. 7 in my case). Also, the IE7 debug console was identifying that as an unavailable method, so that's pretty clear. I rewrote the lines as follows, but the code is still not working:

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;

可以在此pastebin中查看完整的原始脚本: http://pastebin.com/Jc9ySvrb

The full original script can be viewed in this pastebin: http://pastebin.com/Jc9ySvrb

推荐答案

• attachEvent 需要事件以 on 为前缀.
• 该方法的大写字母不同.将attachEvent中的hashchange更改为hashChange，以使事件在IE8中正常工作.
• 使用建议的实现来支持IE7和其他旧浏览器的hashchange实现.
• attachEvent requires events to be prefixed with on.
• You've different capitalizations for the method. Change hashchange in attachEvent tohashChange to get the event to work in IE8.
• Use the suggested implementation to support the hashchange implementation for IE7- and other old browsers.

我创建了一个跨浏览器的实现，该实现将hashchange功能添加到了浏览器，甚至是那些使用不支持它.此后备广告基于规范.

I have created a cross-browser implementation, which adds the hashchange feature to browsers, even those who do not support it. The fallback is based on the specification.

//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处理程序，请使用以下方法.
它定义了两个功能，addHashChange和removeHashChange.这两种方法都以函数作为参数.

Note: This code is useful for one hashchange event. If you want to add multiple hashchange handlers, use the following method.
It defines two functions, addHashChange and removeHashChange. Both methods take a function as an argument.

(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);});

这篇关于获取hashchange事件以在所有浏览器(包括IE7)中运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！