如何检测浏览器url变化

用户通过“点击触发”，“操作历史”，“直接访问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="#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的变化不会触发浏览器请求资源， 也作为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);
}