获取hashchange事件以适用于所有浏览器(包括IE7)

我有一些代码(由另一个开发人员编写)在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; 

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

  • attachEvent要求事件以on为前缀。
  • 您的方法有不同的大小写。 将attachEvent中的hashChange更改为hashChange以使事件在IE8中工作。
  • 使用建议的实现来支持IE7和其他旧浏览器的hashchange实现。

我创建了一个跨浏览器实现,它将hashchangefunction添加到浏览器,甚至是那些不支持它的人。 后备基于规范 。

 //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 

attachEvent有两个参数:

 bSuccess = object.attachEvent(sEvent, fpNotify) 

[并且IE9以下的所有IE版本都需要! :(参见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,因为它封装了所有这些。

和往常一样有一个插件: http : //benalman.com/projects/jquery-hashchange-plugin/