如何使用历史记录类来处理浏览器历史记录

因此，我一般在学习飞镖和网页开发。现在我正在试验历史API。我有：如何使用历史记录类来处理浏览器历史记录

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

我的结论是，当我们点击浏览器的后退或前进按钮，或者使用window.history.forward()或window.history.back()是onPopState才会触发。所以这就像我们渲染一个模板，然后使用pushState来更改它的url，而不是基于url更新来更新模板。这是真的还是不？

编辑：

所以，也许我不够清楚。比方说，我有这样的事情：

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得到input的值，然后通过添加一个监听器changeUrl，我可以使用pushState到浏览器的更新URL。我期待的是，当我做pushState时，window.onPopState将触发并调用回调，但实际上它不会。

tldr，我想要实现的是：

监听URL的改变 - >获取当前URL - >使用当前的URL来调用存储在地图中的处理程序。当使用pushState更新网址时，使用onHashChange也不起作用，其前缀为#。

来源

2014-01-18 Budi Sutrisno

我几次读到你的问题，但我仍然不确定你在问什么。有没有按预期工作？ –

编辑我的答案。我想我现在理解你的问题。如果你不这么认为，写一个评论，我再看看。 –

编辑

设置使用

window.location.hash = input.value;

这触发了对PopState和HashChange事件

一样点击这样的链接

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

散列原

我没有时间仔细看什么找你努力才达到..
但我认为你应该添加一个事件处理程序“window.onHashChange”这样普通的链接工作太用于导航的不仅仅是带有onclick-handlers修改浏览器历史记录的按钮。

来源

2014-01-18 16:21:25

我更新了我的问题。 –

如何使用历史记录类来处理浏览器历史记录

回答

相关问题