首页 > 代码库 > 如何检测浏览器url变化

如何检测浏览器url变化

2024-07-30 10:13:38   217人阅读

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

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

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

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

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

  • 调用history.pushState()或者history.replaceState()不会触发popstate事件. 
  • popstate事件只会在浏览器操作如点击前进or后退按钮(JS调用也可),  点击超链接， 直接访问url等方式触发

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

demo一下

<a href="http://www.mamicode.com/#1">text1</a><a href="http://www.mamicode.com/#2">text2</a><a href="http://www.mamicode.com/#3">text3</a><a href="http://www.mamicode.com/#4">text4</a><a href="http://www.mamicode.com/#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的变化不会触发浏览器请求资源， 也作为ajax保留浏览器历史的解决方案之一。 

兼容如下：

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

URL中"#"后面的字符串改变时也会触发popstate事件

在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变化


联系
我们