如何使用 JavaScript 检测地址栏更改？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1930927/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I detect an address bar change with JavaScript?
提问by JoshNaro
I have a Ajax heavy application that may have a URL such as
我有一个 Ajax 重应用程序，它可能有一个 URL，例如
http://example.com/myApp/#page=1
When a user manipulates the site, the address bar can change to something like
当用户操作该站点时，地址栏可以更改为类似
http://example.com/myApp/#page=5
without reloading the page.
无需重新加载页面。
My problem is the following sequence:
我的问题是以下顺序：
- A user bookmarks the first URL.
- The user manipulates the application such that the second URL is the current state.
- The user clicks on the bookmark created in step 1.
- The URL in the address bar changes from http://example.com/myApp/#page=5to http://example.com/myApp/#page=1, but I don't know of a way to detect the change happened.
- 用户将第一个 URL 加入书签。
- 用户操作应用程序，使第二个 URL 成为当前状态。
- 用户单击在步骤 1 中创建的书签。
- 地址栏中的 URL 从http://example.com/myApp/#page=5更改为http://example.com/myApp/#page=1，但我不知道如何检测发生了变化。
If I detect a change some JavaScript would act on it.
如果我检测到更改，一些 JavaScript 会对其采取行动。
回答by ThiefMaster
HTML5 introduces a hashchangeevent which allows you to register for notifications of url hash changes without polling for them with a timer.
HTML5 引入了一个hashchange事件，它允许您注册 url 哈希更改的通知，而无需使用计时器轮询它们。
It it supported by all major browsers (Firefox 3.6, IE8, Chrome, other Webkit-based browsers), but I'd still highly suggest to use a library which handles the event for you - i.e. by using a timer in browsers not supporting the HTML5 event and using the event otherwise.
所有主要浏览器（Firefox 3.6、IE8、Chrome、其他基于 Webkit 的浏览器）都支持它，但我仍然强烈建议使用为您处理事件的库 - 即在不支持的浏览器中使用计时器HTML5 事件，否则使用该事件。
For further information on the event, see https://developer.mozilla.org/en/dom/window.onhashchangeand http://msdn.microsoft.com/en-us/library/cc288209%28VS.85%29.aspx.
有关该事件的更多信息，请参阅https://developer.mozilla.org/en/dom/window.onhashchange和http://msdn.microsoft.com/en-us/library/cc288209%28VS.85%29。 ASPX。
回答by user187291
check the current address periodically using setTimeout/interval:
使用 setTimeout/interval 定期检查当前地址：
var oldLocation = location.href;
setInterval(function() {
if(location.href != oldLocation) {
// do your action
oldLocation = location.href
}
}, 1000); // check every second
回答by Skawful
You should extend the location object to expose an event that you can bind to.
您应该扩展位置对象以公开您可以绑定到的事件。
ie:
IE：
window.location.prototype.changed = function(e){};
(function() //create a scope so 'location' is not global
{
var location = window.location.href;
setInterval(function()
{
if(location != window.location.href)
{
location = window.location.href;
window.location.changed(location);
}
}, 1000);
})();
window.location.changed = function(e)
{
console.log(e);//outputs http://newhref.com
//this is fired when the window changes location
}
回答by moritzstefaner
SWFaddressis an excellent library for these types of things.
SWFaddress是这些类型的优秀库。
