如何使用History类处理浏览器历史记录 [英] How to handle browser history using History class

问题描述

所以我一般学习dart和web开发。现在我正在试验历史API。我有：

So I'm learning dart and web development in general. Right now I'm experimenting with the history API. I have:

import 'dart:html';

void main() {
  ParagraphElement paragraph = querySelector('.parag');

  ButtonElement buttonOne = querySelector('.testaja');

  buttonOne.onClick.listen((_) {
    window.history.pushState(null, 'test title', '/testdata/');
    window.history.forward();
  });

  ButtonElement buttonTwo = querySelector('.testlagi');

  buttonTwo.onClick.listen((_) {
    window.history.back();
  });

  window.onPopState.listen((_) {
    window.alert(window.location.pathname);
  });
}

我的结论是 onPopState window.history.forward（）或 window.history.back 。所以这就像，我们渲染一个模板，然后使用 pushState 更改其url，而不是基于url更改更新模板。这是真的吗？

My conclusion is that onPopState only triggers when we click on browser's back or forward button, or using window.history.forward() or window.history.back(). So this is like, we render a template, then change its url using pushState, not update template based on url changes. Is this true or not?

编辑：

也许我不够清楚。假设我有这样的：

So maybe I'm not clear enough. Let's say I have something like this:

void main() {
  InputElement input = querySelector('.input')
  ButtonElement changeUrl = querySelector('.change-url');

  changeUrl.onClick.listen((event) {
    window.history.pushState(null, 'test tile', input.value);
  });

  Map urls = {
    '/' : showRoot,
    '/user/:id' : showUserProfile
  };

  window.onPopState.listen((_) {
    var location = window.location.pathname;

    urls[location]();
  });
}

我可以获得输入 changeUrl ，然后通过向 changeUrl 添加一个监听器，我可以使用 pushState 在浏览器上更新网址。我所期望的是，当我做 pushState 时， window.onPopState 将触发并调用回调现实它不。

I can get input's value by clicking on changeUrl, and then by adding a listener to changeUrl, I can use pushState to update url on browser. What I'm expecting is, when I do pushState, the window.onPopState will triggered and invoke the callback when in reality it doesn't.

tldr，我想实现的是：

tldr, what I'm trying to achieve is:

监听url changes - >获取当前网址 - >使用当前url来调用存储在地图中的处理程序。当使用 pushState 更新网址时，使用 onHashChange c $ c>。

listen on url changes -> get current url -> use current url to invoke a handler stored in a map. Using onHashChange also doesn't work when updating url using pushState prefixed by #.

推荐答案

编辑

使用

window.location.hash = input.value;

这会触发 PopState 和 HashChange 事件

，点击这个链接

<a href="#abc">abc</a>

原始

我没有时间仔细看看你试图让achive。

但我认为你应该添加一个事件处理程序为'window.onHashChange'这种方式普通链接工作太用于导航，不仅是带有修改浏览器历史记录的onclick-handlers的按钮。

I don't have time to take a close look what you'r trying to achive..
But I think you should add an event handler for 'window.onHashChange' this way ordinary links work too for navigation, not only buttons with onclick-handlers modifying browser history.

这篇关于如何使用History类处理浏览器历史记录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！