history是javascript中處理上一頁與下一頁的一個object,在ajax中要有換頁的處理效果,而不做頁面切換,可以使用html5所提供的pushState和replaceState,其中replaceState與pushState功能類似,replaceState最主要是取代目前此筆history中的紀錄,而pushState則是新增一筆。
以下是history的function:
/** * 回上一頁 */ history.back(); /** * 下一頁 */ history.forward(); /** * 當參數為正數時,為下幾頁,負數則反之。 * @param {int} page */ history.go(); /** * 改變當前頁面的網址(html5) * @param {*} * 可為任意型態,當事件處發時,會接收到此參數 * @param {String} title * @param {String} link */ history.pushState(); history.replaceState(); /** * 監聽history可使用onpopstate event */ window.onpopstate = function(){ console.log(arguments); };
如果brower不支援html5的屬性時,可以使用window.location,它可以前往不同的頁面,接著只要利用"#"(錨點)的特性,就可以達到不換頁的效果,那麼所謂的"#"(錨點)是指此頁面的html的id,當"#"後面不加任何值時,將會跳到頁面最上端,若有找到符合id,則會前往此id的位置,沒找到則不做任何動作。
window.location:
//跳到頁面最上方 window.location = "#"; //比對html的id,若沒此id不做任何動作 window.location = "#history";
使用以上方法時,可以使用兩個onpopstate、onhashchange去做監聽,只要執行window.location時,這兩個event都會被呼叫,history.back和history.forward也會呼叫以上的event,但是如果使用的是pushState就不同了,pushState不會去呼叫任何的event,只有history的紀錄是經由pushState修改過的,切換面頁才會呼叫onpopstate這個event。
那麼要是brower都沒有支援以上的監聽事件呢(IE6)?那麼可以使用setTimeout這類的function,去定時檢查link有沒有改變,搭配iframe使用,這樣可以直接由iframe去替換,brower上面的link也不需要改變。