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

JavaScript?history?對象詳解

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

前言:

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

  history 對象表示當前窗口首次使用以來用戶的導(dǎo)航歷史記錄。因為 history window 的屬性,所以每個 window 都有自己的 history 對象。出于安全考慮,這個對象不會暴露用戶訪問過的 URL,但可以通過它在不知道實際 URL 的情況下前進和后退。

1、路由導(dǎo)航

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

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

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

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

go() 有兩個簡寫方法: back() 和 forward() 。

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

history.forward();//前進一頁

history 對象還有一個 length 屬性,history.length == 1表示這是用戶窗口中的第一個頁面

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

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

(1)hashchange 事件

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

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

(2)popstate 事件

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

(3)history.pushState() 方法

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

(4)history.replaceState()方法

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

<body>
  <button onclick="handleNext()">點我到下一頁</button><br>
  <button onclick="handleLast()">點我到上一頁</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>

運行結(jié)果如下:

3、補充:URL的hash

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

如下圖所示:

寫在最后:

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

相關(guān)文章

最新評論