如何解决Vaadin 14.4.0操作后退/前进历史记录按钮也许在onHashChange上
我有一个页面,一个单独的类Vaadin项目。在这个项目中,我可能会更改布局以使其看起来好像进入了新页面。但是由于没有新的链接/页面,我无法弄清楚如何允许用户“返回”上一个元素。
有一段时间,我想我可以更改网址,然后了解人们是使用前进还是后退按钮。我发现了hashChange事件,但是我无法理解它或使其起作用。 Vaadin有一个HistoryChangeEventHandler,但它不监听hashChanges,因此我的解决方案不起作用。
关于解决这个问题,我简而言之。我从2019年开始发现this thread,这似乎可以解决我的问题,但是我无法使代码正常工作。我想我试图将错误的元素传递给javaScript执行。
因此,我有一个扩展div的简单主视图。在这个div中,我有以下代码:
History history = UI.getCurrent().getPage().getHistory();
TextField textField = new TextField();
add(textField);
Button button = new Button();
button.setText("New link");
button.addClickListener(e-> history.pushState(null,"#"+textField.getValue()));
add(button);
Button button1 = new Button();
button1.setText("Go back");
button1.addClickListener(e-> history.back());
add(button1);
getElement().executeJs(
"const serverCallback = element.$server.onHashChange; this.window.addEventListener('hashchange',function () {serverCallback(location.hash);},false);"
);
@ClientCallable
public void onHashChange(String hash) {
System.out.print("test "+hash);
}
我希望onHashChange方法会被调用。但是我收到一个JavaScript错误,说:(ReferenceError):元素未定义。
工作解决方案:
getElement().executeJs("const serverCallback = $0.$server.onHashChange;" +
"window.addEventListener('hashchange',false);",getElement());
我猜我的getElement()是扩展的div。这是我的onHashChange方法。
@ClientCallable
public void onHashChange(String location) {
System.out.println("Current location is: " + location);
}
此外,如果您只想从vaadin调用Java方法。您可以执行以下操作:
getElement().executeJs("$0.$server.onHashChange(\"It works\");",getElement());
祝你好运!谢谢Erik抽出宝贵的时间来帮助您。
解决方法
查看executeJs
的JavaDoc,它说:
* Asynchronously runs the given JavaScript expression in the browser in the
* context of this element.
* ...
* This element will be available to the expression as <code>this</code>.
因此,请尝试将element.$server
替换为this.$server
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。