如何在Dart中有效处理浏览器历史记录(即后退按钮)?

时间:2012-08-23 21:16:54

标签: html5 browser browser-history dart

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

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

非常感谢。

2 个答案:

答案 0 :(得分:5)

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. 然后使其成为一种无缝体验:

    1. 为所有锚点添加一个用于书签的href,但添加一个onclick处理程序来调用一个推送历史状态的函数,并使用preventDefault来阻止重新加载。
    2. 在初始页面加载时,读取URL并将其发送到(2)
    3. 中的地图

      样品:

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

答案 1 :(得分:1)

与javascript一样,您可以使用

轻松获取网址中的哈希锚点
var hash = window.location.hash;

哈希与你之间的关联。