hash、hashchange事件

时间 2019-11-11

标签 hash hashchange 事件繁體版

原文原文链接

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

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

　　②hash还有另外一个特色，它的改变不会致使页面从新加载；服务器

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

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

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

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

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

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

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

三、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>