如何检测JavaScript中的URL更改

Question

如何检查JavaScript中的URL是否已更改？例如,使用AJAX的GitHub等网站会在#符号后附加页面信息,以创建唯一的URL而无需重新加载页面.检测此URL是否更改的最佳方法是什么？

• 是onload再次调用事件？
• 是否有URL的事件处理程序？
• 或者必须每秒检查一次URL以检测更改？

Answer 1

在现代浏览器(IE8 +,FF3.6 +,Chrome)中,您可以直接收听该hashchange事件window.

在某些旧版浏览器中,您需要一个不断检查的计时器location.hash.如果您正在使用jQuery,那么有一个插件就可以完成.

Answer 2

使用此代码

window.onhashchange = function() { 
     //code  
}

用jQuery

$(window).bind('hashchange', function() {
     //code
});

Answer 3

使用jquery(和插件),你可以做到

$(window).bind('hashchange', function() {
 /* things */
});

http://benalman.com/projects/jquery-hashchange-plugin/

否则是的,你必须使用setInterval并检查哈希事件的变化(window.location.hash)

更新!一个简单的草案

function hashHandler(){
    this.oldHash = window.location.hash;
    this.Check;

    var that = this;
    var detect = function(){
        if(that.oldHash!=window.location.hash){
            alert("HASH CHANGED - new has" + window.location.hash);
            that.oldHash = window.location.hash;
        }
    };
    this.Check = setInterval(function(){ detect() }, 100);
}

var hashDetection = new hashHandler();

Answer 4

我想要的是能够添加locationchange事件侦听器。有了这个修改，我们可以做这样的事情

window.addEventListener('locationchange', function(){
    console.log('location changed!');
})

相反，window.addEventListener('hashchange',()=>{})只有在url中的＃标签后面的部分发生更改并且window.addEventListener('popstate',()=>{})并不总是起作用时，才会触发。

此修改类似于Christian的答案，修改了历史对象以添加一些功能。

默认情况下，有一个popstate事件，但没有针对pushstate和的事件replacestate。

这会修改这三个功能，使所有的消防自定义locationchange事件供您使用，也pushstate和replacestate活动，如果你想使用这些：

/* These are the modifications: */
history.pushState = ( f => function pushState(){
    var ret = f.apply(this, arguments);
    window.dispatchEvent(new Event('pushstate'));
    window.dispatchEvent(new Event('locationchange'));
    return ret;
})(history.pushState);

history.replaceState = ( f => function replaceState(){
    var ret = f.apply(this, arguments);
    window.dispatchEvent(new Event('replacestate'));
    window.dispatchEvent(new Event('locationchange'));
    return ret;
})(history.replaceState);

window.addEventListener('popstate',()=>{
    window.dispatchEvent(new Event('locationchange'))
});

Answer 5

经过一番研究后编辑:

在某种程度上,我似乎被Mozilla文档中的文档所迷惑.该popstate事件(和它的回调函数onpopstate)都不会触发每当pushState()或replaceState()称为代码.因此,原始答案并不适用于所有情况.

但是有一种方法可以通过根据@ 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文档中的popstate参考

目前(2017年1月)全球92%的浏览器都支持popstate.

Answer 6

适用于 Chrome 102+ (2022-05-24)

navigation.addEventListener("navigate", e => {
  console.log(`navigate ->`,e.destination.url)
});

API 参考WICG/navigation-api

Answer 7

添加哈希更改事件侦听器!

window.addEventListener('hashchange', function(e){console.log('hash changed')});

或者,要收听所有网址更改:

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  
}

Answer 8

如果没有一个窗口事件对您有用（因为它们不适用于我的情况），您还可以使用 MutationObserver来查看根元素（非递归）。

// capture the location at page load
let currentLocation = document.location.href;

const observer = new MutationObserver((mutationList) => {
  if (currentLocation !== document.location.href) {
    // location changed!
    currentLocation = document.location.href;

    // (do your event logic here)
  }
});

observer.observe(
  document.getElementById('root'),
  {
    childList: true,

    // important for performance
    subtree: false
  });

这可能并不总是可行，但通常情况下，如果 URL 更改，根元素的内容也会更改。

我还没有分析过，但理论上这比计时器的开销要少，因为通常实现观察者模式，以便在发生更改时它只是循环遍历订阅。我们在这里只添加了一项订阅。另一方面，计时器必须非常频繁地检查，以确保在 URL 更改后立即触发事件。

此外，这很可能比计时器更可靠，因为它消除了计时问题。

Answer 9

当单击将您重定向到同一域上的不同页面的链接时，这些似乎都不起作用。因此，我制定了自己的解决方案：

let pathname = location.pathname;
window.addEventListener("click", function() {
    if (location.pathname != pathname) {
        pathname = location.pathname;
        // code
    }
});

编辑：您还可以检查 popstate 事件（如果用户返回页面）

window.addEventListener("popstate", function() {
    // code
});

最好的祝愿，

结石

Answer 10

这个解决方案对我有用:

var oldURL = "";
var currentURL = window.location.href;
function checkURLchange(currentURL){
    if(currentURL != oldURL){
        alert("url changed!");
        oldURL = currentURL;
    }

    oldURL = window.location.href;
    setInterval(function() {
        checkURLchange(window.location.href);
    }, 1000);
}

checkURLchange();