關於HTML5 的history API介紹與使用

上一篇我們介紹了H5的營銷,那麼H5的營銷必然會設計到一些技術性的問題,那麼本篇我們就介紹H5的一些新型特性。這些痕跡就保存在history中,在現在熱火的移動終端,以微信爲首的H5開發已不再稀有,越來越多的產品正向着H5轉型,那麼我們將面臨一些問題,例如我們在微信公衆號中點擊了某個頁面的鏈接然後如此循環點擊頁面中的鏈接,那麼瀏覽器的history的堆棧中就會存儲一堆記錄,當想返回到公衆號的主頁面的時候,那就需要多次按着物理返回鍵,  才能返回到主頁面(這裏說下微信公衆號的缺點,打開公衆號的頁面之後,微信本身不自帶返回,只有左上角的關閉功能, 所以在Android只能使用手機物理返回鍵, IOS就坑爹了),那麼這必然暴露出一個問題,用戶體驗。所以我們要對其進行一些處理,那麼就用到了H5的最新特性。

 1. history.pushState與history.replaceState。
 

 A)history.length:當前歷史列表中的歷史記錄數(我大概測了下,IE6+是從0開始的,其他的是從1開始的,若有誤請反饋哈,(^_^); 
 B)history.go(n):前進或後退n條記錄,當n=0或空時會刷新當前頁; 
 C)history.back():後退一步;
 D)history.forward():前進一步; 


 2. HTML5新增的API


 A)history.pushState(data, title [, url]):往歷史記錄堆棧頂部添加一條記錄; data會在onpopstate事件觸發時作爲
   參數傳遞過去;title爲頁面標題,當前所有瀏覽器都會 忽略此參數;url爲頁面地址,可選,缺省爲當前頁地址;
 B)history.replaceState(data, title [, url]) :更改當前的歷史記錄,參數同上; 
 C)history.state:用於存儲以上方法的data數據,不同瀏覽器的讀寫權限不一樣;
 D)window.onpopstate:響應pushState或replaceState的調用;有了這幾個新的API,針對支持的瀏覽器,
 我們可以構建用戶體驗更好的應用了。就像剛提到的Facebook相冊,雖然是AJAX的方式,但用戶可以直接復 制頁面地址分享給好友,
 好友打開看到的就是AJAX加載的數據,做到了書籤化。當然這裏面需要做的工作遠不是說的這麼簡單。


 那麼我們接下來看個簡單的例子:在項目工程目錄中建了3個jsp,分別爲:4444.jsp、5555.jsp、abcd.jsp,如下圖:








如上圖所示,我們首先訪問的是4444.jsp,然後從4444.jsp點擊鏈接跳轉到,5555.jsp,最後在5555.jsp中點擊後退,返回到abcd.jsp,按照正常的邏輯應該返回到4444.jsp,

因爲在4444.jsp中替換了4444.jsp所存在的歷史記錄換成了abcd.jsp,abcd.jsp並不存在於我們的歷史記錄中,這就是history新特性的實現。(關於訪問4444.jsp,url變成了localhost:8080/abcd.jsp,也是由於設置了histroy.replaceState的原因)



關於history對象來實現頁面前進後退(go/back/forward)

常見的用法是:

history.back();//返回上一頁,相當於瀏覽器上後退功能。

history.forward();//去到下一頁,相當於瀏覽器的前進功能。

histoty.go(int);//去到指定的瀏覽歷史記錄頁面。int是正的時候,就是向前int個歷史記錄,如果沒有那麼多,就沒有行爲。int是負數的時候那麼就會向後,

爲0頁面即沒有任何變化。

發佈了22 篇原創文章 · 獲贊 43 · 訪問量 15萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章