javascript - oninput - Haga que el evento hashchange funcione en todos los navegadores(incluido IE7)

javascript oninput event

Question

Tengo un código (escrito por otro desarrollador) que carga la página de AJAX dentro de WordPress (por ejemplo, sin recarga de página) al hacer clic en un elemento de navegación, AJAX actualiza el área de contenido principal. Mi problema es que está roto en IE7 y no tengo idea de por dónde empezar en términos de depuración.

Las líneas de apertura originales fueron

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;

Pero los cambié para que el addEventListener condicional en función de si ese método estaba presente o no. Algunas investigaciones me dijeron que el método no está disponible en versiones anteriores de IE (por ejemplo, 7 en mi caso). Además, la consola de depuración de IE7 identificaba eso como un método no disponible, por lo que es bastante claro. Reescribí las líneas de la siguiente manera, pero el código aún no funciona:

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;

El script original completo se puede ver en este pastebin: http://pastebin.com/Jc9ySvrb

Answer 1

attachEvent toma dos parámetros:

bSuccess = object.attachEvent(sEvent, fpNotify)

[¡Y es necesario para todas las versiones de IE debajo de IE9! :( Ver referencia de MDN ]

Esto podría funcionar:

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

Por supuesto, si es posible, solo debes usar JQuery, ya que encapsula todo esto para tu.

Y, como siempre, hay un complemento: http://benalman.com/projects/jquery-hashchange-plugin/

Answer 2

• attachEvent requiere que los eventos tengan el prefijo on .
• Tienes diferentes capitalizaciones para el método. Cambie hashchange en attachEvent a hashChange para que el evento funcione en IE8.
• Use la implementación sugerida para admitir la implementación de hashchange para IE7 y otros navegadores antiguos.

He creado una implementación en hashchange navegadores, que agrega la función de cambio de hashchange a los navegadores, incluso a aquellos que no la admiten . El repliegue se basa en la especificación .

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

Nota: este código es útil para un evento de intercambio de hash . Si desea agregar varios controladores de hashchange , utilice el siguiente método.
Define dos funciones, addHashChange y removeHashChange . Ambos métodos toman una función como argumento.

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