Get the hashchange event to work in all browsers (including IE7)

前端 未结 2 616
予麋鹿
予麋鹿 2021-01-30 15:18

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

2条回答
  •  慢半拍i
    慢半拍i (楼主)
    2021-01-30 15:31

    • 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.

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

    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

提交回复
热议问题