国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

smartlion / 697人閱讀

摘要：摸魚逛知乎看到這么一個(gè)問題這個(gè)看起來貌似很厲害的樣子，搜搜看不得不說，張?chǎng)涡裾娴膮柡ΑＤ壳昂雎粤诉@個(gè)參數(shù)，雖然他以後有可能會(huì)採用。路由器的無刷新跳轉(zhuǎn)也是利用該完成的。引用資料張?chǎng)涡衽c實(shí)例文檔

摸魚逛知乎看到這么一個(gè)問題

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


不得不說，張?chǎng)涡裾娴膮柡Α?/p> API介紹

首先看看API如何使用：

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

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

title(string)：

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

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

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

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

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

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

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

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

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

引用資料：

張?chǎng)涡瘢篴jax與HTML5 history pushState/replaceState實(shí)例

mdn文檔

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/83210.html

相關(guān)文章

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

    摘要：摸魚逛知乎看到這么一個(gè)問題這個(gè)看起來貌似很厲害的樣子，搜搜看不得不說，張?chǎng)涡裾娴膮柡ΑＤ壳昂雎粤诉@個(gè)參數(shù)，雖然他以後有可能會(huì)採用。路由器的無刷新跳轉(zhuǎn)也是利用該完成的。引用資料張?chǎng)涡衽c實(shí)例文檔 摸魚逛知乎看到這么一個(gè)問題 showImg(https://segmentfault.com/img/bVOmkS?w=1558&h=934); 這個(gè)API看起來貌似很厲害的樣子，搜搜看 show...

    HitenDev 評(píng)論0 收藏0

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

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

    ysl_unh 評(píng)論0 收藏0

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

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

    Lyux 評(píng)論0 收藏0

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

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

    zgbgx 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<