Question

我正在构建一个单页Dart Web应用程序，它基本上由1个Dart文件（交叉编译为JS）和1个具有多个“视图”（屏幕，页面等）的HTML文件组成。在里面。根据用户当前所处的“视图”，我将隐藏/启用此HTML文件中定义的不同DOM元素。这样，用户可以在视图之间导航，而不会触发多个页面加载。

我仍然希望使用每个浏览器的本机历史记录跟踪机制，以便用户点击浏览器中的后退和前进按钮，我将有一个Dart Historian对象找出什么加载视图（再次隐藏/启用DOM元素），具体取决于浏览器在其历史记录中的URL。

我几乎把所有事情都解决了，但有一个例外：

假设用户当前处于“观看＃3”，其网址为http://myapp.example.com/#view3。然后他们点击一个按钮，将它们带到View {4，比如http://myapp.example.com/#view4。我需要在Dart中告诉浏览器：

在浏览器网址栏中设置http://myapp.example.com/#view4
将http://myapp.example.com/#view4添加到浏览器的历史记录
如果尚未启用，请启用浏览器的后退按钮

我相信我可以像上面那样完成＃1：

window.location.href = "http://myapp.example.com/#view3";

......但也许不是。无论哪种方式，我如何实现这一点（Dart代码与浏览器的历史API通信）？

Answer 1

查看route库。

angular.dart也有自己的路由机制，但它是一个更大的框架的一部分，所以除非你打算使用其余部分，否则我会建议使用独立的路由库。

如果您想构建自己的解决方案，可以查看路线client.dart的灵感。

支持两种历史导航方法：

您使用过的网页碎片方法。将窗口位置重新分配给新的页面片段：window.location.assign(newPathWithPageFragment)。这样做会自动将新项目添加到浏览器历史记录中（然后启用后退按钮）。
较新的历史记录API，允许不带片段的常规网址（例如http://myapp.example.com/view3。您可以使用window.history来控制历史记录。只有较新的浏览器支持历史记录API，以便可能是一个问题（虽然dart2js也只支持更新的浏览器，但dart2js支持的浏览器实例可能不太多，不支持History API）。

如果您支持History API，则必须处理的一个问题是初始页面加载。当用户导航到http://myapp.example.com/view3时，浏览器希望在该位置找到资源。您必须设置服务器以通过提供Dart应用程序来响应任何页面请求，然后导航到客户端的正确视图。无论您使用route，angular.dart还是构建自己的解决方案，此问题都将适用，因为这是一个常见的服务器端问题，而且上面都是客户端库。

在Dart中管理浏览器历史记录

1 个答案: