js中對History物件的分析-js教程-PHP中文網

這篇文章主要介紹了關於js中對History物件的分析，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

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: &#39;bar&#39; };
history.pushState(stateObj, &#39;page 2&#39;, &#39;2.html&#39;);

登入後複製

　　　　新增上面這個新記錄後，瀏覽器網址列立刻顯示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}, &#39;title 1&#39;, &#39;?page=1&#39;);
history.pushState({page: 2}, &#39;title 2&#39;, &#39;?page=2&#39;);
history.replaceState({page: 3}, &#39;title 3&#39;, &#39;?page=3&#39;);
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}, &#39;title 1&#39;, &#39;?page=1&#39;);
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中)

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

pushHistory()

登入後複製

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