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>

posted @ 2017-05-16 14:46  carrie_zhao  阅读(18280)  评论(1编辑  收藏  举报