成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

有趣的API： history pushState/popstate 無刷新跳轉(zhuǎn)

smartlion / 694人閱讀

摘要：摸魚逛知乎看到這么一個問題這個看起來貌似很厲害的樣子，搜搜看不得不說，張鑫旭真的厲害。目前忽略了這個參數(shù)，雖然他以後有可能會採用。路由器的無刷新跳轉(zhuǎn)也是利用該完成的。引用資料張鑫旭與實例文檔

摸魚逛知乎看到這么一個問題

這個API看起來貌似很厲害的樣子，搜搜看


不得不說，張鑫旭真的厲害。

API介紹

首先看看API如何使用：

history.pushState(state, title, url) : 無刷新的向瀏覽器 歷史最前方 加入一條記錄。

state(any) 需要保存的數(shù)據(jù)，這個數(shù)據(jù)在觸發(fā)popstate事件時保存在event.state上。

title(string)：

Firefox 目前忽略了這個參數(shù)，雖然他以後有可能會採用。如果以後改變了這個作法，傳送空白的字串應(yīng)該還會是安全的。另外，你可以傳送一個短的標(biāo)題來敘述你想要到的state。     
目前沒有發(fā)現(xiàn)有地方保存這個title，推測是state的說明？

url(string) 需要更改的url地址。

ps：pushState 需要至少兩個參數(shù)。

popstate： 瀏覽器點擊前進(jìn)后退時觸發(fā)的事件。event.state可以獲取當(dāng)前url下設(shè)置的state。

另外獲取pushState中設(shè)置的state不一定要在popstate事件中獲取，直接history.state也可以拿到。

補(bǔ)充內(nèi)容 pjax

pjax,利用ajax 和 pushState做成的和多頁應(yīng)用體驗一致的SPA。github項目地址

現(xiàn)代路由框架的H5模式。

路由器的無刷新跳轉(zhuǎn)也是利用該api完成的。另外，由于url變化，在用戶復(fù)制分享時候由于路由未定義會出錯，所以還需要服務(wù)端進(jìn)行重定向處理。

引用資料：

張鑫旭：ajax與HTML5 history pushState/replaceState實例

mdn文檔

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/83210.html

相關(guān)文章

  • 有趣的API： history pushState/popstate 無刷新跳轉(zhuǎn)

    摘要：摸魚逛知乎看到這么一個問題這個看起來貌似很厲害的樣子，搜搜看不得不說，張鑫旭真的厲害。目前忽略了這個參數(shù)，雖然他以後有可能會採用。路由器的無刷新跳轉(zhuǎn)也是利用該完成的。引用資料張鑫旭與實例文檔 摸魚逛知乎看到這么一個問題 showImg(https://segmentfault.com/img/bVOmkS?w=1558&h=934); 這個API看起來貌似很厲害的樣子，搜搜看 show...

    HitenDev 評論0 收藏0

  • 利用pushState, popState和location.hash等方法自己實現(xiàn)一個小型路由

    摘要：最后通過這些自己實現(xiàn)小型的路由。對象還提供方法這個方法用以監(jiān)聽瀏覽器在不同歷史記錄中進(jìn)行切換，而觸發(fā)相應(yīng)的事件。這時調(diào)用方法后頁面回退，同時頁面發(fā)生刷新這時無法監(jiān)聽這個事件。所以可以進(jìn)行降級使用來進(jìn)行路由設(shè)計。不過，還提供了一個。 這篇文章主要是記錄下HTML5中history提供的pushState, replaceStateAPI。最后通過這些API自己實現(xiàn)小型的路由。 關(guān)于win...

    ysl_unh 評論0 收藏0

  • 從history api看主流框架的路由機(jī)制

    摘要：前端路由庫的作用是改變地址欄，支持瀏覽器前進(jìn)后退，并同步路由對應(yīng)的視圖，這里以及其依賴的庫說一下路由機(jī)制原文地址前提首先簡單介紹一下前端路由機(jī)制所依賴的事件及對應(yīng)的事件對于支持新增方法的瀏覽器，可以通過設(shè)置來在瀏覽器棧中新增一條記錄設(shè)置時 前端路由庫的作用是改變地址欄，支持瀏覽器前進(jìn)、后退，并同步路由對應(yīng)的視圖，這里以react-router及其依賴的history庫說一下路由機(jī)制 原...

    Lyux 評論0 收藏0

  • HTML5 history API，創(chuàng)造更好的瀏覽體驗

    摘要：而唯一不引發(fā)刷新的參數(shù)并不會發(fā)送到服務(wù)器，因此服務(wù)器無法獲得狀態(tài)。目前建議設(shè)置為空字符串。此外請注意，及本身調(diào)用時是不觸發(fā)事件的。我認(rèn)為，按照漸進(jìn)增強(qiáng)的思路，這樣就是最好的了，也就是只使用較少的代碼優(yōu)化高級瀏覽器的使用體驗。 HTML5 history API有什么用呢？ 從Ajax翻頁的問題說起 請想象你正在看一個視頻下面的評論，在翻到十幾頁的時候，你發(fā)現(xiàn)一個寫得稍長，但非常有趣的評...

    zgbgx 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<