原生js监听href url路径变化

最新推荐文章于 2026-06-21 15:32:49 发布

原创最新推荐文章于 2026-06-21 15:32:49 发布 · 7.3k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

javascript 专栏收录该内容

49 篇文章

订阅专栏

本文介绍如何在移动端和PC端（包括IE浏览器）上监听URL的变化，并提供了两种不同的实现方式。对于现代浏览器，可以直接利用onhashchange事件；而对于不支持此事件的老版本IE，则采用定时器来检查URL变化。

移动端直接使用：

function listenHrefChange() {
    //监听href变化 触发更新图表
    window.onhashchange = function () {
      getMap(orgIdRef.current);
    };
}

PC端如需兼容IE 则使用：

//监听触发操作
function hashChange(){
    console.log("url路径产生了变化")
}
 
//url变化监听器
if( ('onhashchange' in window) && ((typeof document.documentMode==='undefined') || document.documentMode==8)) {
    // 浏览器支持onhashchange事件
    window.onhashchange = hashChange;  // TODO，对应新的hash执行的操作函数
} else {
    // 不支持则用定时器检测的办法
    setInterval(function() {
        // 检测hash值或其中某一段是否更改的函数， 在低版本的iE浏览器中通过window.location.hash取出的指和其它的浏览器不同，要注意
        var ischanged = isHashChanged();
        if(ischanged) {
            hashChange();  // TODO，对应新的hash执行的操作函数
        }
    }, 150);
}