欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript?history?對(duì)象詳解

 更新時(shí)間：2021年11月27日 15:29:35   作者：丶Serendipity丶  
這篇文章主要介紹了JavaScript?history?對(duì)象詳解，history?對(duì)象表示當(dāng)前窗口首次使用以來用戶的導(dǎo)航歷史記錄。因?yàn)?history?是?window?的屬性，所以每個(gè)?window?都有自己的?history?對(duì)象，更多詳細(xì)內(nèi)容請(qǐng)參考下面文章內(nèi)容

前言：

　　我們?yōu)g覽一個(gè)網(wǎng)頁時(shí)可能不太會(huì)注意網(wǎng)頁前進(jìn)后退這些操作，但是在開發(fā)時(shí)你是否想過頁面之間的跳轉(zhuǎn)經(jīng)歷了什么，瀏覽器時(shí)怎么保存的頁面信息，重新返回上一個(gè)頁面的時(shí)候是否需要重新加載頁面呢，會(huì)有很對(duì)疑問，要想解決這些問題，首先需要知道瀏覽器中的window下的history對(duì)象，本文來詳細(xì)總結(jié)一下該對(duì)象的相關(guān)知識(shí)點(diǎn)。

　　history 對(duì)象表示當(dāng)前窗口首次使用以來用戶的導(dǎo)航歷史記錄。因?yàn)?history 是 window 的屬性，所以每個(gè) window 都有自己的 history 對(duì)象。出于安全考慮，這個(gè)對(duì)象不會(huì)暴露用戶訪問過的 URL，但可以通過它在不知道實(shí)際 URL 的情況下前進(jìn)和后退。

1、路由導(dǎo)航

　　history.go() 方法可以在用戶歷史記錄中沿任何方向?qū)Ш?，可以前進(jìn)也可以后退。這個(gè)方法只接收一個(gè)參數(shù)，這個(gè)參數(shù)可以是一個(gè)整數(shù)，表示前進(jìn)或后退多少步。

 history.go(-1);// 后退一頁

history.go(1);// 前進(jìn)一頁

history.go(2);// 前進(jìn)兩頁 //

go() 有兩個(gè)簡寫方法： back() 和 forward() 。

history.back();// 后退一頁

history.forward();//前進(jìn)一頁

history 對(duì)象還有一個(gè) length 屬性，history.length == 1表示這是用戶窗口中的第一個(gè)頁面

　histroy的go方法，back方法、forword方法以及用戶在瀏覽器手動(dòng)的前進(jìn)后退按鈕都會(huì)導(dǎo)致頁面刷新后跳轉(zhuǎn)?！?/p>

2、歷史狀態(tài)管理API

（1）hashchange 事件

　　hashchange：history 對(duì)象的一個(gè)新特性是hashchange，會(huì)在頁面 URL 的散列變化時(shí)被觸發(fā)，開發(fā)者可以在此時(shí)執(zhí)行某些操作。當(dāng)URL的片段標(biāo)識(shí)符更改時(shí)，將觸發(fā)hashchange事件 (跟在＃符號(hào)后面的URL部分，包括＃符號(hào))。而狀態(tài)管理API 則可以讓開發(fā)者改變?yōu)g覽器 URL 而不會(huì)加載新頁面。

比如：pushState和replaceState方法，頁面并不會(huì)刷新，但是路由會(huì)發(fā)生改變。

（2）popstate 事件

　　當(dāng)活動(dòng)歷史記錄條目更改時(shí)，將觸發(fā)popstate事件。如果被激活的歷史記錄條目是通過對(duì)history.pushState（）的調(diào)用創(chuàng)建的，或者受到對(duì)history.replaceState（）的調(diào)用的影響，popstate事件的state屬性包含歷史條目的狀態(tài)對(duì)象的副本。需要注意的是調(diào)用history.pushState()或history.replaceState()不會(huì)觸發(fā)popstate事件。只有在做出瀏覽器動(dòng)作時(shí)，才會(huì)觸發(fā)該事件，如用戶點(diǎn)擊瀏覽器的回退按鈕（或者在Javascript代碼中調(diào)用history.back()或者history.forward()方法）

（3）history.pushState() 方法

　　pushState() 方法向當(dāng)前瀏覽器會(huì)話的歷史堆棧中添加一個(gè)狀態(tài)（state）。這個(gè)方法接收 3 個(gè)參數(shù)：一個(gè) state 對(duì)象、一個(gè)新狀態(tài)的標(biāo)題和一個(gè)（可選的）相對(duì) URL。pushState() 方法執(zhí)行后，狀態(tài)信息就會(huì)被推到歷史記錄中，瀏覽器地址欄也會(huì)改變以反映新的相對(duì) URL。URL欄顯示新地址, 但是不會(huì)加載 頁面，甚至不會(huì)檢查頁面是否存在，該方法會(huì)增加history.length

（4）history.replaceState()方法

　　replaceState()方法修改當(dāng)前歷史記錄實(shí)體。這個(gè)方法接收 3 個(gè)參數(shù)：一個(gè) state 對(duì)象、一個(gè)新狀態(tài)的標(biāo)題和一個(gè)（可選的）相對(duì) URL。replaceState() 方法執(zhí)行后，將會(huì)更新當(dāng)前的state對(duì)象或者當(dāng)前歷史實(shí)體的URL來響應(yīng)用戶的的動(dòng)作,URL欄顯示新地址, 但是不會(huì)加載 頁面，甚至不會(huì)檢查頁面是否存在。該方法不會(huì)增加history.length。

<body>
  <button onclick="handleNext()">點(diǎn)我到下一頁</button><br>
  <button onclick="handleLast()">點(diǎn)我到上一頁</button><br>
  <script>
    window.onload = function () {
      console.log(window.history);
    }
    window.addEventListener('hashchange', function () {
      console.log('The hash has changed!')
    }, false);
    window.addEventListener('popstate', (event) => {
      console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
    });
    function handleNext() {
      const state = { userId: "1234", page: "2" }
      const title = '二'
      const url = 'page2.html'
      window.history.pushState(state, title, url)
      console.log(window.history);
    }
    function handleLast() {
      const state = { userId: "1234", page: "21" }
      const title = '一'
      const url = 'page21.html'
      window.history.replaceState(state, title, url)
      console.log(window.history);
    }
  </script>
</body>

運(yùn)行結(jié)果如下：

3、補(bǔ)充：URL的hash

　　URL的hash也就是錨點(diǎn)(#), 本質(zhì)上是改變window.location的href屬性，我們可以通過直接賦值location.hash來改變href, 但是頁面不發(fā)生刷新,

如下圖所示：

寫在最后:

到此這篇關(guān)于JavaScript history 對(duì)象詳解的文章就介紹到這了,更多相關(guān)history 對(duì)象內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論