欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久

相關(guān)文檔：https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulatingthebrowser_history

實(shí)現目標

1. 頁(yè)面的跳轉（前進(jìn)后退，點(diǎn)擊等）不重新請求頁(yè)面
2. 頁(yè)面URL與頁(yè)面展現內容一致（符合人們對傳統網(wǎng)頁(yè)的認識）
3. 在不支持的瀏覽器下降級成傳統網(wǎng)頁(yè)的方式

使用到的API

history.state

當前URL下對應的狀態(tài)信息。如果當前URL不是通過(guò)pushState或者replaceState產(chǎn)生的，那么history.state是null。

history.pushState(state, title, url)

將當前URL和history.state加入到history中，并用新的state和URL替換當前。不會(huì )造成頁(yè)面刷新。

state：與要跳轉到的URL對應的狀態(tài)信息。

title：不知道干啥用，傳空字符串就行了。

url：要跳轉到的URL地址，不能跨域。

history.replaceState

用新的state和URL替換當前。不會(huì )造成頁(yè)面刷新。

state：與要跳轉到的URL對應的狀態(tài)信息。

title：不知道干啥用，傳空字符串就行了。

url：要跳轉到的URL地址，不能跨域。

window.onpopstate

history.go和history.back（包括用戶(hù)按瀏覽器歷史前進(jìn)后退按鈕）觸發(fā)，并且頁(yè)面無(wú)刷的時(shí)候（由于使用pushState修改了history）會(huì )觸發(fā)popstate事件，事件發(fā)生時(shí)瀏覽器會(huì )從history中取出URL和對應的state對象替換當前的URL和history.state。通過(guò)event.state也可以獲取history.state。

支持性判斷

if ('pushState' in history) {...}

實(shí)現思路

用戶(hù)通過(guò)“點(diǎn)擊觸發(fā)”，“操作歷史”，“直接訪(fǎng)問(wèn)URL”的方式修改當前URL。這三種觸發(fā)方式會(huì )使瀏覽器做出不同的行為。如果頁(yè)面做無(wú)刷跳轉，那么頁(yè)面具體顯示什么內容需要js來(lái)控制，js則需要根據一些信息來(lái)知道當前應該顯示什么內容，這個(gè)信息就是history.state。這樣我們只要保持URL和history.state一一對應，就能保證URL和內容一一對應。大部分情況下URL和history.state都是一一對應的，但通過(guò)直接URL訪(fǎng)問(wèn)頁(yè)面的方式進(jìn)入頁(yè)面，history.state是null，所以我們需要把URL轉換成對應的history.state寫(xiě)入。我們不能直接寫(xiě)入history.state，需要通過(guò)replaceState的方式寫(xiě)入。對于不支持pushstate的瀏覽器，一律修改href跳轉頁(yè)面，等同于直接訪(fǎng)問(wèn)URL。示意圖如下。