hash 要點: 1、不會向後臺發請求;#是用來指導瀏覽器動作的,對伺服器端完全無用。 2、用來跳轉到頁面的指定位置: 為網頁位置指定標識符,有兩個方法。一是使用錨點,比如<a name="print"></a>,二是使用id屬性,比如<div id="print" >。 3、hash改變,會產生一 ...
hash 要點:
1、不會向後臺發請求;#是用來指導瀏覽器動作的,對伺服器端完全無用。
2、用來跳轉到頁面的指定位置: 為網頁位置指定標識符,有兩個方法。一是使用錨點,比如<a name="print"></a>,二是使用id屬性,比如<div id="print" >。
btn.onclick = function(){
window.location.hash = 'contDEF';
}
//HTML中
<div id="contABC" style="width: 70px; border: 5px solid red; height: 500px;"></div>
<div id="contDEF" style="width: 70px; border: 5px solid red; height: 300px;"></div>
3、hash改變,會產生一條歷史記錄。
4、改變#不觸髮網頁重載,(第一條,不會發送請求!只是客戶端,因此也不重載)
5、會觸發onhashchange事件, 使用方法有以下幾種:
window.onhashchange = render
window.addEventListener("hashchange", render, false);
<body onhashchange="func();">
PushState等
1、pushState是添加一條歷史記錄,添加完後,可以使用history.state 讀取;
2、pushState和replaceState接受參數一樣,({js對象}, title, url ) 其中title,瀏覽器不怎麼支持,一般設為null, url是可選的。
history.pushState({'abc':abc}, null, `#/${abc}/${def}`); //通過設置url改變了hash的值,也可以改變search,
這樣的話,url就改變了,因此,可以通過這種方式,在url中保存一些信息。