hash、hashchange事件

1、hash即URL中"#"字符后面的部分。

①使用浏览器访问网页时，如果网页URL中带有hash，页面就会定位到id（或name）与hash值一样的元素的位置；

②hash还有另一个特点，它的改变不会导致页面重新加载；

③hash值浏览器是不会随请求发送到服务器端的；

④通过window.location.hash属性获取和设置hash值。

window.location.hash值的变化会直接反应到浏览器地址栏（#后面的部分会发生变化），同时，浏览器地址栏hash值的变化也会触发window.location.hash值的变化，从而触发onhashchange事件。

2、hashchange事件（IE8已支持该事件）

①当URL的片段标识符更改时，将触发hashchange事件（跟在#符号后面的URL部分，包括#符号）

②hashchange事件触发时，事件对象会有hash改变前的URL（oldURL）和hash改变后的URL（newURL）两个属性：

window.addEventListener('hashchange',function(e) { console.log(e.oldURL);  console.log(e.newURL) },false);

3、demo

    <!DOCTYPE html> 
    <html lang="en"> 
    <head> 
        <meta charset="UTF-8"> 
        <title>history 测试</title> 
    </head> 
    <body> 
    
        <p><input type="text" value="0" id="oTxt" /></p> 
        <p><input type="button" value="+" id="oBtn" /></p> 
        
        <script> 
            var otxt = document.getElementById("oTxt"); 
            var oBtn = document.getElementById("oBtn"); 
            var n = 0; 
            
            oBtn.addEventListener("click",function(){ 
                n++; 
                add(); 
            },false); 
            get(); 
            
            function add(){ 
                if("onhashchange" in window){ //如果浏览器的原生支持该事件
                 window.location.hash = "#"+n; 
                } 
            } 
            
            function get(){ 
                if("onhashchange" in window){ //如果浏览器的原生支持该事件
                    window.addEventListener("hashchange",function(e){ 
                        var hashVal = window.location.hash.substring(1); 
                        if(hashVal){ 
                            n = hashVal; 
                            otxt.value = n; 
                        } 
                    },false); 
                } 
            } 
        </script> 
    </body> 
    </html>

hash、hashchange事件

1、hash即URL中"#"字符后面的部分。

2、hashchange事件（IE8已支持该事件）

3、demo

推荐阅读更多精彩内容