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

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

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

非常感谢.

解决方法

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服务器的方式:

>定义一组适用于窗口位置的匹配器
>将匹配器映射到显示虚拟页面或其他位置的函数

然后使其成为无缝体验:

>为所有锚点添加一个用于书签的href,但添加一个onclick处理程序来调用一个推送历史状态的函数,并使用preventDefault来防止重新加载.
>在初始页面加载时,读取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);
}

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


h5页面是什么意思
html5复合选择器都有哪些
什么是html5响应式布局
h5页面制作策划怎么做
html5关系选择器有哪些
h5有哪些缓存机制
position中的sticky如何使用
h5页面制作用什么软件
h5链接怎么做
html5层次选择器有哪些
h5是什么意思
localstorage有哪些方法
h5怎么制作点击图标
h5怎么制作倒计时
h5怎么生成链接
h5表格边框怎么设置
h5兼容问题怎么解决
h5怎么做交互设计
h5怎么做进度条
h5怎么加链接