How to execute javascript after page fully loaded?

PeerTube
1

Hi. I am trying to modify some things that require Javascript to be used. So I use the custom JS section.

My issue is, the code seems to be executed before the page fully load.

I have tried following solutions:

window.addEventListener('load',() => {
  // more code
});

window.onload = function(){
  // more code
};

document.onreadystatechange = function () {
  // more code
};

But all 3 of them seems not working. I am not sure how Peertube work, but I believe the custom JS loaded in the main part of the website, then the content loaded separately after.

The only solution now is to set timeout. But this is quite ugly since everyone have different loading time.
Any idea?

Thanks!

2

Hello,

Client content is renderer by Angular, a SPA framework so the content may be not rendered yet when your code is running.

What do you want to achieve?

3

I want to change the color or my name, and probably do some more styling later if I got this to work.
So basically I search my name using Javascript and XPath. Then I add a class which I added in custom css section.

For now, that is all I wanted to do.

4

@Chocobozzz I am trying to make my own plugin to achieve this. Currently I am using action:router.navigation-end to execute JS on specific pages. My problem is, the hook only executed on URL changes. So if a user visited my website, the hook won’t triggered, unless they navigate to another page after that.

Let say I want to change my username color on homepage (example.com), my code won’t work, unless user navigate to somewhere else, and go to homepage again.

Should I use action:application.init? That doesn’t sound right.