首頁 > 運維 > 安全 > javascript中的History物件如何使用

javascript中的History物件如何使用

王林
發布: 2023-06-02 16:55:14
轉載
1122 人瀏覽過

length

  history.length屬性保存著歷史記錄的URL數量。初始時,該值為1。由於IE10 瀏覽器在初始時回傳2,所以有相容性問題,所以該值並不常用

跳轉方法

  go()、back()和forward()

  如果移動的位置超出了訪問歷史的邊界,以上三個方法並不報錯,而是靜默失敗

  [注意]使用歷史記錄時,頁面通常從瀏覽器緩存之中加載,而不是重新要求伺服器發送新的網頁。不觸發onload

增改記錄

  HTML5為history物件新增了兩個新方法,history.pushState()和history.replaceState(),用來在瀏覽歷史中新增和修改記錄。 state屬性用來保存記錄對象,而popstate事件用來監聽history對象的變化

  [注意]ie9不支援

 【pushState()】

    history.pushStateState ()方法為瀏覽器歷史增加了一個狀態。 pushState()方法帶有三個參數:一個狀態物件、一個標題(現在被忽略了)以及一個可選的URL位址

    history.pushState(state, title, url);

    state object —— 狀態物件是一個由pushState()方法創建的、與歷史紀錄相關的javascript物件。當使用者定向到一個新的狀態時,會觸發popstate事件。事件的state屬性包含了歷史紀錄的state物件。如果不需要這個對象,此處可以填null

    title —— 新頁面的標題,但是所有瀏覽器目前都忽略這個值,因此這裡可以填null

#    URL ——這個值這個參數提供了新歷史紀錄的地址。新URL必須和目前URL在同一個網域,否則,pushState()會丟出異常。這個參數可選,如果它沒有被特別標註,會被設定為文檔的當前URL

    假定當前網址是example.com/1.html,使用pushState方法在瀏覽記錄(history對象)中添加一個新記錄

var stateObj = { foo: 'bar' };
history.pushState(stateObj, 'page 2', '2.html');
登入後複製

    新增上面這個新記錄後,瀏覽器網址列立刻顯示example.com/2.html,但不會跳到2.html,甚至不會檢查2.html是否存在,它只是成為瀏覽歷史中的最新記錄。假如這時訪問了google.com,然後點擊了倒退按鈕,頁面的url將顯示2.html,但是內容還是原來的1.html。再點選一次倒退按鈕,url將顯示1.html,內容不變

    總之,pushState方法不會觸發頁面刷新,只是導致history物件發生變化,地址列的顯示位址發生變化

    如果pushState的url參數,設定了一個新的錨點值(即hash),並不會觸發hashchange事件,,即使新的URL和舊的只在hash上有區別

    如果設定了一個跨域網址,則會報錯。這樣設計的目的是,防止惡意程式碼讓使用者以為他們是在另一個網站上

  【replaceState()】

  history.replaceState方法的參數與pushState方法一模一樣,不同之處在於replaceState()方法會修改目前歷史記錄條目而並非建立新的條目

  假定目前網頁是example.com/example.html

history.pushState({page: 1}, 'title 1', '?page=1');
history.pushState({page: 2}, 'title 2', '?page=2');
history.replaceState({page: 3}, 'title 3', '?page=3');
history.back()
// url显示为http://example.com/example.html?page=1
history.back()
// url显示为http://example.com/example.html
history.go(2)
// url显示为http://example.com/example.html?page=3
登入後複製

  【state】

history.state屬性傳回目前頁面的state物件

history.pushState({page: 1}, 'title 1', '?page=1');
history.state// { page: 1 }
登入後複製

  【popstate事件】

  每當同一個文件的瀏覽歷史(即history物件)出現變更時,就會觸發popstate事件

  [注意]需要注意的是,僅僅呼叫pushState方法或replaceState方法,並不會觸發該事件,只有使用者點擊瀏覽器倒退按鈕和前進按鈕,或使用javascript呼叫back()、forward() 、go()方法時才會觸發。另外,該事件只針對同一個文檔,如果瀏覽歷史的切換,導致加載不同的文檔,該事件也不會觸發

  使用的時候,可以為popstate事件指定回呼函數。這個回呼函數的參數是一個event事件對象,它的state屬性指向pushState和replaceState方法為當前URL所提供的狀態對象(即這兩個方法的第一個參數)

  上面程式碼中的event.state,就是透過pushState和replaceState方法,為目前URL綁定的state物件

  這個state物件也可以直接透過history物件讀取

  var currentState = history.state;
登入後複製

往返快取

  預設情況下,瀏覽器會在目前會話(session)快取頁面,當使用者點擊「前進」或「後退」按鈕時,瀏覽器就會從快取中載入頁面

  瀏覽器有一個特性叫「往返快取」(back-forward cache或bfcache),可以在使用者使用瀏覽器的「後退」和「前進」按鈕時加快頁面的轉換速度。這個快取中不僅保存著頁面數據,還保存了DOM和javascript的狀態;實際上是將整個頁面都保存在了內存裡。如果頁面位於bfcache中,那麼再次開啟該頁面時就不會觸發load事件

  [注意]IE10-瀏覽器不支援

  【pageshow】

  pageshow事件在页面加载时触发,包括第一次加载和从缓存加载两种情况。如果要指定页面每次加载(不管是不是从浏览器缓存)时都运行的代码,可以放在这个事件的监听函数

  第一次加载时,它的触发顺序排在load事件后面。从缓存加载时,load事件不会触发,因为网页在缓存中的样子通常是load事件的监听函数运行后的样子,所以不必重复执行。同理,如果是从缓存中加载页面,网页内初始化的JavaScript脚本(比如DOMContentLoaded事件的监听函数)也不会执行

  [注意]虽然这个事件的目标是document,但必须将其事件处理程序添加到window

  pageshow事件有一个persisted属性,返回一个布尔值。页面第一次加载时或没有从缓存加载时,这个属性是false;当页面从缓存加载时,这个属性是true

  [注意]上面的例子使用了私有作用域,以防止变量showCount进入全局作用域。如果单击了浏览器的“刷新”按钮,那么showCount的值就会被重置为0,因为页面已经完全重新加载了

  【pagehide】

  与pageshow事件对应的是pagehide事件,该事件会在浏览器卸载页面的时候触发,而且是在unload事件之前触发。与pageshow事件一样,pagehide在document上面触发,但其事件处理程序必须要添加到window对象

  [注意]指定了onunload事件处理程序的页面会被自动排除在bfcache之外,即使事件处理程序是空的。原因在于,onunload最常用于撤销在onload中所执行的操作,而跳过onload后再次显示页面很可能就会导致页面不正常

  pagehide事件的event对象也包含persisted属性,不过其用途稍有不同。如果页面是从bfcache中加载的,那么persisted的值就是true;如果页面在卸载之后会被保存在bfcache中,那么persisted的值也会被设置为true。因此,当第一次触发pageshow时,persisted的值一定是false,而在第一次触发pagehide时,persisted就会变成true(除非页面不会被保存在bfcache中)

window.onpagehide = function(e){
e = e || event;
console.log(e.persisted);
}
登入後複製

使用方法:

1、取消默认的返回操作

function pushHistory(){
 var state = {
    title: "title",
    url: "#"   
  }
 window.history.pushState(state, "title", "#");  
}

pushHistory()
登入後複製

2、history.js用于兼容html4,也可以监听pushState与replaceSate

以上是javascript中的History物件如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:yisu.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板