HTML5定義了用于操作歷史記錄的新API,允許您在不重新加載窗口的情況下更改位置.有一篇關(guān)于Dive Into HTML5的精彩文章,展示了如何使用歷史API在單頁(yè)面應(yīng)用中模擬多頁(yè)面導(dǎo)航.它很容易翻譯成Dart.

在帶導(dǎo)航的單頁(yè)應(yīng)用程序中,我通常設(shè)置客戶(hù)端代碼的方式類(lèi)似于在服務(wù)器上設(shè)置RoR或Django應(yīng)用程序或Dart http服務(wù)器的方式：

>定義一組適用于窗口位置的匹配器

>將匹配器映射到顯示虛擬頁(yè)面或其他位置的函數(shù)

然后使其成為無(wú)縫體驗(yàn)：

>為所有錨點(diǎn)添加一個(gè)用于書(shū)簽的href,但添加一個(gè)onclick處理程序來(lái)調(diào)用一個(gè)推送歷史狀態(tài)的函數(shù),并使用preventDefault來(lái)防止重新加載.

>在初始頁(yè)面加載時(shí),讀取URL并將其發(fā)送到(2)中的地圖

樣品：

main() {

// handle the back button

window.on.popState.add((_) => showPage());

}

showPage() {

String path = window.location.pathname;

if (path == '/') {

showFrontPage();

} else if (DETAIL_PAGE_URL.hasMatch(path)) {

String id = DETAIL_PAGE_URL.firstMatch(path).group(1);

showDetailPage(i);

}

}

showFrontPage() {

//... code to build a link to a detail page

detailAnchor.on.click.add((MouseEvent e) {

window.history.pushState(null,detail.title,detail.url);

e.preventDefault();

showDetailPage(detail);

},false);

}

總結(jié)

以上是生活随笔為你收集整理的html5 保存 搜索历史,html5 – 如何有效处理Dart中的浏览器历史记录(即后退按钮)？...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。