如何检查URL是否在JavaScript中发生了变化?例如，像GitHub这样使用AJAX的网站，会在#符号后附加页面信息，以创建唯一的URL，而无需重新加载页面。检测该URL是否发生变化的最佳方法是什么?
是否再次调用onload事件? 是否有URL的事件处理程序? 或者必须每秒钟检查URL以检测更改?
当前回答
享受吧!
var previousUrl = '';
var observer = new MutationObserver(function(mutations) {
if (location.href !== previousUrl) {
previousUrl = location.href;
console.log(`URL changed to ${location.href}`);
}
});
其他回答
这个解决方案对我很有效:
function checkURLchange(){
if(window.location.href != oldURL){
alert("url changed!");
oldURL = window.location.href;
}
}
var oldURL = window.location.href;
setInterval(checkURLchange, 1000);
在现代浏览器(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+
window.addEventListener("beforeunload", function (e) {
// do something
}, false);
添加一个哈希更改事件侦听器!
window.addEventListener('hashchange', function(e){console.log('hash changed')});
或者，监听所有URL更改:
window.addEventListener('popstate', function(e){console.log('url changed')});
这比下面的代码要好，因为在window中只能存在一个东西。Onhashchange，你可能会覆盖其他人的代码。
// Bad code example
window.onhashchange = function() {
// Code that overwrites whatever was previously in window.onhashchange
}
适用于Chrome 102+ (2022-05-24)
navigation.addEventListener("navigate", e => {
console.log(`navigate ->`,e.destination.url)
});
消防引用巫术崇拜者
