javascript - 在- - window.location.hash - - 更改?

  显示原文与译文双语对照的内容

我正在使用Ajax和hash进行导航。 是否有办法检查 window.location.hash 是否像这样改变?

http://example.com/blah#123, http://example.com/blah#456

当我在文档加载时检查它就奏效了。 但是如果我有 #hash 建立导航不工作当我按浏览器上的后退按钮( 所以我从blah#456跳到 blah#123 ) 。 它显示在地址框中,但我无法用JavaScript捕捉它。

时间:

要真正执行这里( 这就是'reallysimplehistory'这里操作),唯一的方法是设置一个持续检查当前哈希的间隔,并将它的与以前的哈希进行比较,并让订阅服务器订阅在哈希更改时触发的更改事件。 它不完美,但是浏览器实际上不支持这个事件。


更新以使这里回答保持新鲜:

如果你使用的是 jQuery ( 今天哪一个对于大多数的),那么一个不错的解决方案就是使用jQuery给你提供的事件系统来监听窗口对象上的hashchange事件。


$(window).on('hashchange', function() {
//.. work.. 
});

值得高兴的是你甚至可以编写代码,不需要担心hashchange支持,但是你需要做一些魔法,在形式的有点不太知名的jquery功能 jquery特别活动。

有了这里功能,你基本上可以为任何事件运行一些设置代码,第一次有人尝试用任何方式使用事件( 例如绑定到事件) 。

在这个设置代码中,你可以检查原生浏览器支持,如果浏览器不是本机实现的,你可以设置一个计时器来轮询更改,并触发jQuery事件。

这完全解开你的代码需要理解这种支持问题,特殊事件的实现这种( 获取简单的98%工作版本) 微不足道,但为什么当别人已经

HTML5 指定 hashchange 事件 。 这个事件是所有现代浏览器现在支持。 在以下浏览器版本中添加了支持:

  • IE 8
  • Firefox 3.6
  • Chrome 5
  • Safari 5
  • Opera 10.6

注意,以防 IE 7和 IE 9 if 语句将真正( 用于"onhashchange"在 Windows 中), 但是 window.onhashchange 不会火,所以最好是散列存储和检查每个 100毫秒后是否改变了所有版本的IE 与否。


 if (("onhashchange" in window) &&!($.browser.msie)) {
 window.onhashchange = function () {
 alert(window.location.hash);
 }
//Or $(window).bind( 'hashchange',function(e) {
//alert(window.location.hash);
//});
 }
 else {
 var prevHash = window.location.hash;
 window.setInterval(function () {
 if (window.location.hash!= prevHash) {
 prevHash = window.location.hash;
 alert(window.location.hash);
 }
 }, 100);
 }

编辑- 自 jQuery 1.9之后,不支持 $.browser.msie 。 源:http://api.jquery.com/jquery.browser/

你可以很容易地实现一个观察者("看"方法)"窗口。位置""哈希"属性的对象。

Firefox 有其 实现看变化的对象,但如果你使用其他浏览器,其它一些实现( 例如监视对象属性在 JavaScript 中的变化) ——将获得成功。

代码将如下所示:


window.location.watch(
 'hash',
 function(id,oldVal,newVal){
 console.log("the window's hash value has changed from"+oldval+" to"+newVal);
 }
);

然后你可以测试它:


var myHashLink ="home";
window.location = window.location +"#" + myHashLink;

当然,这将触发你的观察者函数。

这是 建议的实现 meandmycode 。


var page_url = 'http://www.yoursite.com/';//full path leading up to hash;
var current_url_w_hash = page_url + window.location.hash;//now you might have something like: http://www.yoursite.com/#123

function TrackHash() {
 if (document.location!= page_url + current_url_w_hash) {
 window.location = document.location;
 }
 return false;
}
var RunTabs = setInterval(TrackHash, 200);

这就是。。现在,只要你按回车或者前进按钮,页面就会按照新的哈希值重新加载。

...