在 Vaadin 14 应用程序中执行 JS 代码不执行任何操作

Question

我正在尝试在页面加载时进行简单的向下滚动。

@Route("somthing")
public class SomeView extends VerticalLayout{

public SomeView(){
    ...
    Adding some Elements
    ...

    UI.getCurrent().getPage().executeJs("window.scroll(0,300)");
}
}

我也试过给 window:

添加一个监听器

 UI.getCurrent().getPage().executeJs("window.addEventListener('onload', function(){console.log('trigger');window.scroll(0,300);});");

但是在这两种情况下，加载页面时都没有任何反应。

Answer 1

就像评论中提到的 Olli，第二个不起作用，因为在您添加事件监听器时 onload 事件已经发生。

我认为第一个不起作用，因为 SomeView 尚未附加到页面（当您在构造函数中执行 js 时），因此页面还没有足够的内容可滚动.
您应该在视图的 onAttach 方法中执行 javascript。

@Route("somthing")
public class SomeView extends VerticalLayout{

    public SomeView(){
        ...
    }

    @Override
    public void onAttach(AttachEvent attachEvent) {
        UI.getCurrent().getPage().executeJs("window.scroll(0,300)");
    }
}

Answer 2

只需使用 getElement() 而不是 UI.getCurrent().getPage()

@Route("something")
public class SomeView extends VerticalLayout{

  public SomeView(){
    ...
    Adding some Elements
    ...

    getElement().executeJs("window.scroll(0,300)");
  }
}

在您的 SomeView 的构造函数中。

在 Vaadin 14 应用程序中执行 JS 代码不执行任何操作

Executing JS-Code in Vaadin 14 Application does nothing

vaadin

vaadin14