onload event not working when loading JavaScript to browser

[letrthang]

Description of the bug

Vaadin flow 23, Srping boot Java 17.

Using @JavaScript to load JS file to browser. However onload event does not auto trigger.

Reference code here:

https://github.com/letrthang/vaadin23-flow-pro-components/blob/main/src/main/java/com/example/application/views/helloworld/HelloWorldView.java

Expected behavior

onload event works properly

Minimal reproducible example

https://github.com/letrthang/vaadin23-flow-pro-components/blob/main/src/main/java/com/example/application/views/helloworld/HelloWorldView.java

Versions

• Vaadin / Flow version: 23
• Java version: 17
• OS version:Any
• Browser version (if applicable):any
• Application Server (if applicable):N/A
• IDE (if applicable):N/A

[letrthang]

Note: if try as below solution, it works

so, workaround solution is to add JS file to index.html

[taefi]

@letrthang could you please elaborate more on what you want to achieve here? Do you have a JS file called "clientLocation.js" that contains the code to register a listener for load event? Where is it located?

[letrthang]

@letrthang could you please elaborate more on what you want to achieve here? Do you have a JS file called "clientLocation.js" that contains the code to register a listener for load event? Where is it located?

Hi @taefi , you can check on this file: https://github.com/letrthang/vaadin23-flow-pro-components/blob/main/src/main/java/com/example/application/views/helloworld/HelloWorldView.java

As you see, onload method in file clientLocation.js is not called.

https://github.com/letrthang/vaadin23-flow-pro-components/blob/main/src/main/resources/META-INF/resources/javascript/clientLocation.js

i want load listener is triggered when this file clientLocation.js loaded in browser. But this maybe a limitation of vaadin flow and the workaround above is fine for now.

[Artur-]

i want load listener is triggered when this file clientLocation.js loaded in browser.

The page has been loaded before your clientLocation.js is loaded so the load event has already been fired. It is not clear why you would need an event listener instead of doing window.scrollTo(0, 0); directly in your script

[mcollovati]

Hi @letrthang, sorry for delayed answer.

As Artur said, using @Javascript annotation, your script is loaded after the page is loaded.

If you want your script to be part of the index.html you can implement AppShellConfigurator.configurePage(...) to inline it

For example, in your sample project, you can add the following method to the com.example.application.Application class (that implements AppShellConfigurator)

    @Override
    public void configurePage(AppShellSettings settings) {
        settings.addInlineFromFile("META-INF/resources/javascript/clientLocation.js", Inline.Wrapping.JAVASCRIPT);
    }

This configuration produces the same effects as your workaround.

As now we have an example on how to achieve your goal, I'm going to close the issue. Please don't hesitate to reopen it or to create a new one if you still have problems.

[mcollovati]

Here's also a link to the documentation

https://vaadin.com/docs/latest/advanced/modifying-the-bootstrap-page