history.js 一個無重新整理就可改變瀏覽器欄地址的外掛(不依賴jquery)
[url]http://ourjs.com/detail/5507ed1b1e8c708516000007[/url]
示例: [url]http://browserstate.github.io/history.js/demo/[/url]
簡介
HTML4有一些對瀏覽歷史的前進後退API的支援如:
HTML5瀏覽器新新增了不重新整理改變網址地址的API:
這些API構建單頁面無重新整理網站是十分有幫助的,很可惜他們在老瀏覽器中無法使用。history.js可以解決這個問題。
History.js優雅地支援所有瀏覽器的History/State的 API(pushState,replaceState,onPopState)。包括資料,title,replaceState。支援 jQuery,MooTools和Prototype。在HTML5瀏覽器,它使用原生API,可以直接修改URL,而無需再使用雜湊值。對於HTML4 瀏覽器則使用Hash值進行相容。
程式碼示例
效果
當在HTML5瀏覽器中時位址列的變化
www.mysite.com
www.mysite.com/?state=1
www.mysite.com/?state=2
www.mysite.com/?state=3
www.mysite.com/?state=4
www.mysite.com/?state=3
www.mysite.com/?state=1
www.mysite.com
www.mysite.com/?state=3
當在HTML4瀏覽器中時位址列的變化
www.mysite.com
www.mysite.com/#?state=1&_suid=1
www.mysite.com/#?state=2&_suid=2
www.mysite.com/#?state=3&_suid=3
www.mysite.com/#?state=4
www.mysite.com/#?state=3&_suid=3
www.mysite.com/#?state=1&_suid=1
www.mysite.com
www.mysite.com/#?state=3&_suid=3
示例: [url]http://browserstate.github.io/history.js/demo/[/url]
簡介
HTML4有一些對瀏覽歷史的前進後退API的支援如:
window.history.back();
window.history.forward();
window.history.go(-1);
window.history.go(1);
HTML5瀏覽器新新增了不重新整理改變網址地址的API:
var currentState = history.state;
var stateObj = { foo: "bar" };
window.history.pushState(stateObj, "page 2", "bar.html");
這些API構建單頁面無重新整理網站是十分有幫助的,很可惜他們在老瀏覽器中無法使用。history.js可以解決這個問題。
History.js優雅地支援所有瀏覽器的History/State的 API(pushState,replaceState,onPopState)。包括資料,title,replaceState。支援 jQuery,MooTools和Prototype。在HTML5瀏覽器,它使用原生API,可以直接修改URL,而無需再使用雜湊值。對於HTML4 瀏覽器則使用Hash值進行相容。
程式碼示例
(function(window,undefined){
// Bind to StateChange Event
History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
var State = History.getState(); // Note: We are using History.getState() instead of event.state
});
// Change our States
History.pushState({state:1}, "State 1", "?state=1"); // logs {state:1}, "State 1", "?state=1"
History.pushState({state:2}, "State 2", "?state=2"); // logs {state:2}, "State 2", "?state=2"
History.replaceState({state:3}, "State 3", "?state=3"); // logs {state:3}, "State 3", "?state=3"
History.pushState(null, null, "?state=4"); // logs {}, '', "?state=4"
History.back(); // logs {state:3}, "State 3", "?state=3"
History.back(); // logs {state:1}, "State 1", "?state=1"
History.back(); // logs {}, "Home Page", "?"
History.go(2); // logs {state:3}, "State 3", "?state=3"
})(window);
效果
當在HTML5瀏覽器中時位址列的變化
www.mysite.com
www.mysite.com/?state=1
www.mysite.com/?state=2
www.mysite.com/?state=3
www.mysite.com/?state=4
www.mysite.com/?state=3
www.mysite.com/?state=1
www.mysite.com
www.mysite.com/?state=3
當在HTML4瀏覽器中時位址列的變化
www.mysite.com
www.mysite.com/#?state=1&_suid=1
www.mysite.com/#?state=2&_suid=2
www.mysite.com/#?state=3&_suid=3
www.mysite.com/#?state=4
www.mysite.com/#?state=3&_suid=3
www.mysite.com/#?state=1&_suid=1
www.mysite.com
www.mysite.com/#?state=3&_suid=3
相關文章
- 常用瀏覽器外掛瀏覽器
- 谷歌瀏覽器外掛-jsonView外掛谷歌瀏覽器JSONView
- [外掛擴充套件]jQuery二維碼外掛0.2【更新瀏覽器相容】套件jQuery瀏覽器
- 分享谷歌瀏覽器的一個外掛-OneTab,非常贊谷歌瀏覽器
- 好用的谷歌瀏覽器外掛谷歌瀏覽器
- JQuery外掛:圖片上傳本地預覽外掛,改進案例一則。jQuery
- 分享一個瀏覽器外掛:搜尋引擎結果過濾器瀏覽器過濾器
- IE瀏覽器外掛開發瀏覽器
- UC瀏覽器外掛開發瀏覽器
- 跨瀏覽器外掛技術瀏覽器
- google瀏覽器外掛開發Go瀏覽器
- 精選10款谷歌瀏覽器外掛武裝你的瀏覽器谷歌瀏覽器
- win10瀏覽器怎麼加入外掛_win10瀏覽器外掛在哪設定Win10瀏覽器
- 瀏覽器外掛 network-plus瀏覽器
- Chrome瀏覽器實用外掛集合Chrome瀏覽器
- iTab瀏覽器外掛安裝教程瀏覽器
- ubuntu 安裝瀏覽器flash外掛Ubuntu瀏覽器
- ie瀏覽器開啟變成別的瀏覽器怎麼辦 開啟ie瀏覽器變成360怎麼改瀏覽器
- 滲透測試用的瀏覽器外掛瀏覽器
- 關於瀏覽器外掛的初步認識瀏覽器
- 漫畫 | 瀏覽器一個比一個“無恥”瀏覽器
- win10瀏覽器外掛管理怎麼設定_win10瀏覽器如何載入外掛Win10瀏覽器
- Chrome 瀏覽器,這8款外掛一定要用!Chrome瀏覽器
- 唯一客服瀏覽器外掛:直播或客服平臺自動回覆外掛瀏覽器
- tampermonkey外掛指令碼油猴外掛下載 - 篡改猴瀏覽器外掛指令碼瀏覽器
- Firefox瀏覽器的安裝及外掛使用Firefox瀏覽器
- win10獵豹瀏覽器怎麼安裝外掛_win10獵豹瀏覽器安裝外掛的方法Win10瀏覽器
- 第一次寫瀏覽器外掛--去除廣告框瀏覽器
- JShelter:一個反惡意軟體Web瀏覽器擴充套件外掛JSWeb瀏覽器套件
- 安裝Google Chrome瀏覽器及常用外掛GoChrome瀏覽器
- Tampermonkey for Mac油猴Safari瀏覽器外掛Mac瀏覽器
- chrome瀏覽器 json外掛【WEB前端助手】Chrome瀏覽器JSONWeb前端
- 多平臺文章同步瀏覽器外掛 – ArticleSync瀏覽器
- 超詳細帶你入門開發一個超實用的瀏覽器外掛瀏覽器
- win10自帶瀏覽器能裝外掛嗎 win10自帶瀏覽器怎麼安裝外掛Win10瀏覽器
- 吐血推薦 5 個 Chrome 瀏覽器外掛,文末有從別人的電腦移植外掛的方法Chrome瀏覽器
- 如何編寫一個Jquery外掛jQuery
- C#中的網頁瀏覽器外掛:AxWebBrowser ZTC#網頁瀏覽器Web