我使用Ajax和哈希导航。
有没有办法检查window。location。hash是否像这样改变了?
http://example.com/blah#123至http://example.com/blah#456
如果我在文件加载时检查它,它就会工作。
但如果我有#哈希导航,它不工作时,我按浏览器上的后退按钮(所以我从blah#456跳转到blah#123)。
它显示在地址框内,但我无法用JavaScript捕获它。
我使用Ajax和哈希导航。
有没有办法检查window。location。hash是否像这样改变了?
http://example.com/blah#123至http://example.com/blah#456
如果我在文件加载时检查它,它就会工作。
但如果我有#哈希导航,它不工作时,我按浏览器上的后退按钮(所以我从blah#456跳转到blah#123)。
它显示在地址框内,但我无法用JavaScript捕获它。
当前回答
真正做到这一点的唯一方法(也是'reallysimplehistory'如何做到这一点的),是通过设置一个间隔来不断检查当前哈希,并将其与之前的哈希进行比较,我们这样做,并让订阅者订阅一个发生变化的事件,如果哈希发生变化。它并不完美,但是浏览器本身并不支持这个事件。
更新以保持这个答案新鲜:
如果您正在使用jQuery(对于大多数人来说,这应该是基本的),那么一个很好的解决方案是使用jQuery提供的抽象,通过使用它的事件系统来侦听窗口对象上的hashchange事件。
$(window).on('hashchange', function() {
//.. work ..
});
这里的好处是,您可以编写甚至不需要担心hashchange支持的代码,但是您确实需要做一些神奇的事情,以不太为人所知的jQuery特性jQuery特殊事件的形式。
有了这个特性,当有人第一次试图以任何方式(比如绑定到事件)使用事件时,你基本上可以为任何事件运行一些设置代码。
在这个设置代码中,您可以检查本机浏览器的支持,如果浏览器没有本机实现这一点,您可以设置一个计时器来轮询更改,并触发jQuery事件。
这完全解除了您的代码需要理解的支持问题,实现这种特殊事件是微不足道的(获得一个简单的98%工作版本),但为什么要这样做,当别人已经做了。
其他回答
简单的例子 单击按钮更改散列
窗口。onhashchange = () => console.log('散列更改-> ${window.location.hash} ') <按钮onclick = " window.location.hash = math . random ()“>哈希到数学。随机> < /按钮 <按钮onclick = " window.location。>哈希到ABC</button> . <按钮onclick = " window.location。hash='XYZ'"> hash到XYZ</button> .
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);
就是这样……现在,无论何时点击后退或前进按钮,页面都会根据新的哈希值重新加载。
真正做到这一点的唯一方法(也是'reallysimplehistory'如何做到这一点的),是通过设置一个间隔来不断检查当前哈希,并将其与之前的哈希进行比较,我们这样做,并让订阅者订阅一个发生变化的事件,如果哈希发生变化。它并不完美,但是浏览器本身并不支持这个事件。
更新以保持这个答案新鲜:
如果您正在使用jQuery(对于大多数人来说,这应该是基本的),那么一个很好的解决方案是使用jQuery提供的抽象,通过使用它的事件系统来侦听窗口对象上的hashchange事件。
$(window).on('hashchange', function() {
//.. work ..
});
这里的好处是,您可以编写甚至不需要担心hashchange支持的代码,但是您确实需要做一些神奇的事情,以不太为人所知的jQuery特性jQuery特殊事件的形式。
有了这个特性,当有人第一次试图以任何方式(比如绑定到事件)使用事件时,你基本上可以为任何事件运行一些设置代码。
在这个设置代码中,您可以检查本机浏览器的支持,如果浏览器没有本机实现这一点,您可以设置一个计时器来轮询更改,并触发jQuery事件。
这完全解除了您的代码需要理解的支持问题,实现这种特殊事件是微不足道的(获得一个简单的98%工作版本),但为什么要这样做,当别人已经做了。
HTML5指定了一个hashchange事件。现在所有现代浏览器都支持此事件。以下浏览器版本增加了支持:
Internet Explorer 8 Firefox 3.6 Chrome 5 Safari 5 Opera 10.6
注意,在Internet Explorer 7和Internet Explorer 9的情况下,if语句将返回true(对于“onhashchange”在windows中),但窗口。onhashchange永远不会触发,所以最好存储哈希值,并在每100毫秒后检查它是否为所有版本的Internet Explorer更改。
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/