html - 如何有效地处理 Dart 中的浏览器历史记录(即后退按钮)？

Question

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

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

非常感谢。

Answer 1

HTML5 定义了用于操作历史记录的新 API，让您无需重新加载窗口即可更改位置。在 Dive Into HTML5 上有一篇很棒的文章展示了如何使用 history API 在单页应用程序中模拟多页导航。它很容易翻译成 Dart。

文章如下: http://diveintohtml5.info/history.html

这里是历史的 Dart 文档: http://api.dartlang.org/docs/continuous/dart_html/History.html

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

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

然后让它成为一个无缝的体验:

1. 为所有 anchor 提供一个 href 用于书签，但添加一个 onclick 处理程序以调用推送历史状态的函数，并添加 preventDefault 以防止重新加载。
2. 在初始页面加载时，读取 URL 并将其发送到 (2) 中的 map

示例:

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);
}