前言:
現(xiàn)在前后端基本都是通過(guò)ajax實(shí)現(xiàn)前后端接口數(shù)據(jù)的交互,但是,ajax有個(gè)小小的劣勢(shì),即:不支持瀏覽器“后退”和“前進(jìn)“鍵。
但是,現(xiàn)在我們可以通過(guò)H5的histroy屬性 解決ajax在交互請(qǐng)求的這個(gè)小bug。
事件描述:
H5增加了一個(gè)事件window.onpopstate,當(dāng)用戶點(diǎn)擊那兩個(gè)按鈕就會(huì)觸 發(fā)這個(gè)事件。但是光檢測(cè)到這個(gè)事件是不夠的,還得能夠傳些參數(shù),也就是說(shuō)返回到之前那個(gè)頁(yè)面的時(shí)候得知道那個(gè)頁(yè)面的pageIndex。通過(guò) history的pushState方法可以做到,pushState(pageIndex)將當(dāng)前頁(yè)的pageIndex存起來(lái),再返回到這個(gè) 頁(yè)面時(shí)獲取到這個(gè)pageIndex。
window.history.pushState描述:
window.history.pushState(state, title, url);
state對(duì)象:是一個(gè)JavaScript對(duì)象,它關(guān)系到由pushState()方法創(chuàng)建出來(lái)的新的history實(shí)體。用以存儲(chǔ)關(guān)于你所要插入到歷史 記錄的條目的相關(guān)信息。State對(duì)象可以是任何Json字符串。因?yàn)閒irefox會(huì)使用用戶的硬盤(pán)來(lái)存取state對(duì)象,這個(gè)對(duì)象的最大存儲(chǔ)空間為640k。如果大于這個(gè)數(shù) 值,則pushState()方法會(huì)拋出一個(gè)異常。
title:firefox現(xiàn)在回忽略這個(gè)參數(shù),雖然它可能將來(lái)會(huì)被使用上。而現(xiàn)在最安全的使用方式是傳一個(gè)空字符串,以防止將來(lái)的修改。