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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM