history是個html' target='_blank'>全局變量,即window.history
屬性和方法如下:
length:歷史堆棧中的記錄數。
back(): 返回上一頁。
foward(): 前進到下一頁。
go([delta]): delta是數字,如果為0或為空則刷新本頁,如果正數則前進[delta]頁,如負數則后退[delta]頁。
HTML5添加了以下兩個方法:
pushState(data, title, [,url]):在歷史堆棧頂部插入一條記錄。
data為一個對象或null,會在window的popstate事件(window.onpopstate)時,作為state參數傳遞過去。
title為頁面的標題,當前所有瀏覽器都忽略這個參數。
url 為頁面url,不寫則為當前頁。
replaceState(data, title, [,url]):更改當前頁面的歷史記錄。這種更改不會去訪問該URL。
replaceState()的URL參數必須和當前頁的協議(如HTTP、HTTPS)和域名完全相同(使用不同的子域都不行)
目前只有Safari 5.0+、Chrome 8.0+、Firefox 4.0+和iOS 4.2.1+支持。如果想兼容老瀏覽器的話,可以試試History.js,而且它還修正了一些bug。
pushState 與 replaceState 使用:
?php $photo = isset($_GET[ id ])? $_GET[ id ] : 1; !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd html head meta http-equiv= content-type content= text/html; charset=utf-8 title test /title script type= text/javascript function go(c){ document.title = test + c; //更改title window.history.pushState({ title : test +c, photo :c}, test +c, test.php?id= +c); // 插入前一頁歷史記錄 window.history.replaceState({ title : test +c, photo :c}, test +c, test.php?id= +c); // 更改當前歷史記錄 document.getElementById( photo ).src = c + .jpg window.onpopstate = function(obj){ if(obj.state!=null){ document.title = obj.state.title; // 后退時更新title document.getElementById( photo ).src = obj.state.photo + .jpg /script /head body a href= javascript:void(0) quot;go(1) page 1 /a a href= javascript:void(0) quot;go(2) page 2 /a a href= javascript:void(0) quot;go(3) page 3 /a a href= javascript:void(0) quot;go(4) page 4 /a p img src= ?=$photo ? .jpg id= photo /p /body /html window.onpopstate方法:
window.onpopstate = function(event){ alert(event.state);}本篇文章關于HTML5 history API 的介紹,更多相關內容請關注php 。
相關推薦:
關于冒泡,二分法插入,快速排序算法的介紹
講解php 支持斷點續傳的文件下載類的相關內容
如何通過php 過濾html標記屬性類
以上就是關于HTML5 history API 的介紹的詳細內容,其它編程語言
鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。
|
新聞熱點
疑難解答