js怎么监听url变化

通过JavaScript监听URL变化的方法包括使用History API、HashChange事件以及MutationObserver。其中，History API是一种更现代和强大的方法，它可以处理浏览器的前进、后退以及手动修改URL的情况。以下将详细介绍如何使用History API来监听URL变化。

一、使用History API监听URL变化

1. pushState 和 replaceState

History API 提供了 pushState 和 replaceState 方法，可以在不重新加载页面的情况下修改URL，同时还可以触发相应的事件。

window.addEventListener('popstate', function(event) {
    console.log('URL changed to: ' + document.location.href);
});
history.pushState({page: 1}, "title 1", "?page=1");
history.pushState({page: 2}, "title 2", "?page=2");
history.replaceState({page: 3}, "title 3", "?page=3");

2. popstate 事件

popstate 事件在浏览器的活动历史记录条目发生变化时被触发。换句话说，当用户点击浏览器的后退或前进按钮时，或者通过 history.back()、history.forward() 或 history.go() 进行导航时，popstate 事件会被触发。

window.addEventListener('popstate', function(event) {
    console.log('URL changed to: ' + document.location.href);
});

3. 自定义事件监听

结合 pushState 和 replaceState，我们可以创建自定义事件来监听URL变化。

(function(history){
    var pushState = history.pushState;
    var replaceState = history.replaceState;
    history.pushState = function(state) {
        if (typeof history.onpushstate == "function") {
            history.onpushstate({state: state});
        }
        return pushState.apply(history, arguments);
    };
    history.replaceState = function(state) {
        if (typeof history.onreplacestate == "function") {
            history.onreplacestate({state: state});
        }
        return replaceState.apply(history, arguments);
    };
})(window.history);
window.history.onpushstate = window.history.onreplacestate = function(e) {
    console.log('URL changed to: ' + document.location.href);
};

二、使用HashChange事件监听URL变化

对于较老的应用，特别是单页应用（SPA），可以使用HashChange事件来监听URL的变化。这种方法主要用于监听URL中的哈希部分（即#号后面的部分）的变化。

window.addEventListener('hashchange', function() {
    console.log('Hash changed to: ' + document.location.hash);
});

三、使用MutationObserver监听URL变化

MutationObserver 是一种更底层的方法，可以监听DOM树的变化。尽管它不是专门为监听URL变化设计的，但在一些特定场景下可以使用。

const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
        if (mutation.type === 'attributes' && mutation.attributeName === 'href') {
            console.log('URL changed to: ' + document.location.href);
        }
    });
});
observer.observe(document.documentElement, { attributes: true, subtree: true });

四、结合使用History API与HashChange事件

在某些情况下，可能需要同时使用 History API 和 HashChange 事件来监听URL变化，确保在各种场景下都能正确捕捉到URL的变化。

function onUrlChange() {
    console.log('URL changed to: ' + document.location.href);
}
window.addEventListener('popstate', onUrlChange);
window.addEventListener('hashchange', onUrlChange);

五、如何在项目中集成URL变化监听

在实际项目中，可能需要将上述方法集成到项目管理或协作系统中，比如 研发项目管理系统PingCode 和 通用项目协作软件Worktile。以下是一个简单的示例，展示如何在项目中集成URL变化监听。

// 定义URL变化监听器
function onUrlChange() {
    console.log('URL changed to: ' + document.location.href);
    // 在URL变化时执行具体的业务逻辑
    // 比如在PingCode和Worktile中进行相应的页面更新或数据加载
    // pingCode.updatePage(document.location.href);
    // worktile.loadData(document.location.href);
}
// 监听History API事件
window.addEventListener('popstate', onUrlChange);
// 监听HashChange事件
window.addEventListener('hashchange', onUrlChange);
// 自定义事件监听
(function(history){
    var pushState = history.pushState;
    var replaceState = history.replaceState;
    history.pushState = function(state) {
        if (typeof history.onpushstate == "function") {
            history.onpushstate({state: state});
        }
        return pushState.apply(history, arguments);
    };
    history.replaceState = function(state) {
        if (typeof history.onreplacestate == "function") {
            history.onreplacestate({state: state});
        }
        return replaceState.apply(history, arguments);
    };
})(window.history);
window.history.onpushstate = window.history.onreplacestate = onUrlChange;

通过上述方法，可以在项目中轻松实现对URL变化的监听，并在URL变化时执行相应的业务逻辑，如页面更新、数据加载等。这对于现代Web应用，尤其是单页应用（SPA），具有重要意义，可以提升用户体验和应用的响应速度。