如何检查URL是否在JavaScript中发生了变化?例如，像GitHub这样使用AJAX的网站，会在#符号后附加页面信息，以创建唯一的URL，而无需重新加载页面。检测该URL是否发生变化的最佳方法是什么?
是否再次调用onload事件? 是否有URL的事件处理程序? 或者必须每秒钟检查URL以检测更改?
当前回答
window.addEventListener("beforeunload", function (e) {
// do something
}, false);
其他回答
在现代浏览器(IE8+， FF3.6+， Chrome)中，你可以只听窗口上的hashchange事件。
在一些旧的浏览器中，您需要一个计时器来持续检查location.hash。如果你正在使用jQuery，有一个插件可以做到这一点。
例子
下面我将撤销所有URL更改，以保持滚动:
<script type="text/javascript">
if (window.history) {
var myOldUrl = window.location.href;
window.addEventListener('hashchange', function(){
window.history.pushState({}, null, myOldUrl);
});
}
</script>
请注意，以上使用的历史api可用于Chrome, Safari, Firefox 4+和Internet Explorer 10pp4+
我创建了这个与hashchange事件非常相似的事件
// onurlchange-event.js v1.0.1
(() => {
const hasNativeEvent = Object.keys(window).includes('onurlchange')
if (!hasNativeEvent) {
let oldURL = location.href
setInterval(() => {
const newURL = location.href
if (oldURL === newURL) {
return
}
const urlChangeEvent = new CustomEvent('urlchange', {
detail: {
oldURL,
newURL
}
})
oldURL = newURL
dispatchEvent(urlChangeEvent)
}, 25)
addEventListener('urlchange', event => {
if (typeof(onurlchange) === 'function') {
onurlchange(event)
}
})
}
})()
使用示例:
window.onurlchange = event => {
console.log(event)
console.log(event.detail.oldURL)
console.log(event.detail.newURL)
}
addEventListener('urlchange', event => {
console.log(event)
console.log(event.detail.oldURL)
console.log(event.detail.newURL)
})
看看jQuery的卸载函数。它能处理所有的事情。
https://api.jquery.com/unload/
当用户导航离开页面时，卸载事件被发送到窗口元素。这可能意味着许多事情之一。用户可以点击一个链接离开页面，或者在地址栏中输入一个新的URL。前进和后退按钮将触发事件。关闭浏览器窗口将触发该事件。即使是重新加载页面也会首先创建卸载事件。
$(window).unload(
function(event) {
alert("navigating");
}
);
经过一番研究后编辑:
不知怎么的，我似乎被Mozilla文档上的文档愚弄了。当代码中调用pushState()或replaceState()时，popstate事件(及其回调函数onpopstate)不会被触发。因此，原来的答案并不适用于所有情况。
然而，有一种方法可以绕过这个问题，根据@alpha123对函数进行猴子补丁:
var pushState = history.pushState;
history.pushState = function () {
pushState.apply(history, arguments);
fireEvents('pushState', arguments); // Some event-handling function
};
原来的答案
假设这个问题的标题是“如何检测URL更改”，当你想知道完整路径更改(而不仅仅是哈希锚)时，答案是你可以监听popstate事件:
window.onpopstate = function(event) {
console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
在Mozilla Docs中引用popstate
目前(2017年1月)全球92%的浏览器支持popstate。
享受吧!
var previousUrl = '';
var observer = new MutationObserver(function(mutations) {
if (location.href !== previousUrl) {
previousUrl = location.href;
console.log(`URL changed to ${location.href}`);
}
});
