hi,欢迎访问本站!
当前位置: 首页Web前端正文

js监听url变化的方法

墨初 Web前端 2850阅读

在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、由于是利用的定时操作,可以会影响网页的性能

声明:无特别说明,转载请标明本文来源!
相关推荐