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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。