如何检测浏览器url变化

时间：2024-01-11 22:00:08

用户通过“点击触发”，“操作历史”，“直接访问URL”的方式修改当前URL。这三种触发方式会使浏览器做出不同的行为

html5提供了两种方式在页面中操作历史

  • history.pushState(state, title, url)
    • 将当前URL和history.state加入到history中，并用新的state和URL替换当前, 不会造成页面刷新。
  • history.replaceState(state, title, url)
    • 用新的state和URL替换当前, 不会造成页面刷新。
  • history.state
    • 如果当前URL不是通过pushState或者replaceState产生的，那么history.state是null。

提供检测历史记录变化的事件popstate

  • 每当处于激活状态的历史记录条目发生变化时,popstate事件就会在对应window对象上触发.

    •  如果当前处于激活状态的历史记录条目是由history.pushState()方法创建,或者由history.replaceState()方法修改过的, 则popstate事件对象的state属性包含了这个历史记录条目的state对象的一个拷贝.

  • 调用history.pushState()或者history.replaceState()不会触发popstate事件.
  • popstate事件只会在浏览器操作如点击前进or后退按钮(JS调用也可), URL中"#"后面的字符串改变时触发.

利用这一特性， 就可以处理无刷新页面的前端后退，保存历史操作的页面状态啦。

demo一下

<a href="#1">text1</a>

<a href="#2">text2</a>

<a href="#3">text3</a>

<a href="#4">text4</a>

<a href="#5">text5</a>

<script>

window.addEventListener('popstate', function(event) {

  readState(event.state);

});

for(i=0;i<5;i++){

    var stateObject = {id: i};

    var title = "Wow Title "+i;

    var newUrl = "/my/awesome/url/"+i;

    history.pushState(stateObject,title,newUrl);

}

function readState(data){

  alert(data.id);

}

</script>

　　

hashchange

在URL的参数列表（及URL中"#"号后面的所有字符串）发生变化的时候触发， hash的变化不会触发浏览器请求资源，因此天然可以来处理页面内无刷新导航 。

兼容如下：

  • IE8+ | FF3.6+ | Safari5+ | Chrome | Opera 10.6+ 支持hashchange
  • event对象有两个属性：oldURL和newURL,  FF3.6+ Chrome Opera支持 oldURL 和 newURL

在IE6、7下可以采用定时循环检测或者采用添加隐藏iframe的方式来解决， 如：

if( ('onhashchange' in window) && ((typeof document.documentMode==='undefined') || document.documentMode==8)) {

    // 浏览器支持onhashchange事件

    window.onhashchange = hashChangeFire;  // TODO，对应新的hash执行的操作函数

} else {

    // 不支持则用定时器检测的办法

    setInterval(function() {

        // 检测hash值或其中某一段是否更改的函数， 在低版本的iE浏览器中通过window.location.hash取出的指和其它的浏览器不同，要注意

　　　　 var ischanged = isHashChanged();

        if(ischanged) {

            hashChangeFire();  // TODO，对应新的hash执行的操作函数

        }

    }, 150);

}

总结

在前端的实际应用场景中，如果页面局部刷新，不改变URl，在页面刷新、前进、后退，或者想分享一个具体的页面状态链接的时候， 就会体验特别差。

如果要改变url进行局部更新， 这时检测到URL的变化就非常重要。

我们可以利用改变hash触发hashchange或者兼容方案定时检测hashchange的方法，来达到更改页面Url并同时更新页面局部显示状态的效果。 不过有时会期望单页中的URL和服务端开发时的URL风格比较一致，会在document上监听链接的点击，利用html5 history提供的API来改变URl， 并调用相应的处理函数来达到不刷新页面同时更新页面局部状态的目的

以上已经能好的解决了页面内功能无刷新导航的功能， 但还有一个需要注意的是， 第一次访问链接或者刷新页面URL时， 需要后端配合将本页的所有URL做一下重定向。 另外首次从不同的URL进入时，也需要在前端根据URL进行一下手动的分发。

相关文章