js监听url变化的方法

在Web开发中尤其在单页应用的开发中，当用户点击导航链接时，页面需要根据url的变化来改变其内容。尤其是在ajax应用时，如果url发生了变化就需要加载新的内容。而js中就有监听url变化的方法，下面73so博客就来详细的说一下。

js 监听url变化的方法

HTML5中新增了onhashchange事件，此事件可以用于监听URL的哈希部分的变化。当URL的哈希部分发生变化时，onhashchange事件会被触发。

例：js监听url哈希值的变化

// 监听URL的哈希部分变化
window.onhashchange = function() {
  console.log('URL的哈希部分发生变化');
};

上面的示例中，如果哈希值发生了变化，就会触发onhashchange事件，从而输出相应的信息。

注：onhashchange事件只能监听URL的哈希部分变化，不能监听除哈希值以外其它url部份的变化，但如果想要监听url中其它部份的变化可以参考下面的示例。

例2：js监听url变化

// 获取当前URL
var currentUrl = window.location.href;
// 定时检测URL是否发生变化
setInterval(function() {
  if (window.location.href !== currentUrl) {
    console.log('URL发生变化');
    currentUrl = window.location.href;
  }
}, 1000);

示例代码说明

1、先获取当前url地址，然后再通过setInterval()方法定时检测URL是否发生变化。

2、如果当前的url发生了变化，则执行相应事件，并更新当前的地址

3、由于是利用的定时操作，可以会影响网页的性能