如何在Dart中有效处理浏览器历史记录（即后退按钮）？

Question

在Dart的标准库中是否有任何设施来帮助处理状态和后退按钮？或者我需要模拟JavaScript解决方案来实现通过Web应用程序的状态导航？

我打算将其应用于个人项目，因此浏览器兼容性不是问题（即仅HTML5解决方案就可以了）。

非常感谢。

- Rui Vieira

Answer 1

HTML5为操作浏览器历史记录定义了新的API，允许您更改位置而无需重新加载窗口。Dive Into HTML5上有一篇很好的文章，展示了如何使用历史API在单页应用程序中模拟多页导航。这很容易转换为Dart。

以下是文章链接： http://diveintohtml5.info/history.html

以下是关于历史记录的Dart文档： http://api.dartlang.org/docs/continuous/dart_html/History.html

在具有导航功能的单页应用程序中，我通常设置客户端代码的方式类似于RoR、Django应用程序或Dart http服务器在服务器上的设置：

1. 定义一组针对窗口位置的匹配器
2. 将这些匹配器映射到显示虚拟页面或其他位置的函数

为了使它成为无缝的体验：

3. 为所有锚点添加一个href以进行书签，但添加一个onclick处理程序来调用推送历史状态的函数，并preventDefault以防止重新加载。
4. 在初始页面加载时，读取URL并将其发送到(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);
}

- Justin Fagnani

Answer 2

就像JavaScript一样，您可以轻松地使用以下代码获取URL中的哈希锚点：

var hash = window.location.hash;

哈希值和操作之间的关联由您决定。

- Nicolas François