在 blazor 中使用 javascript，直到我点击页面才工作

Question

. Answers to this question are eligible for a +50 reputation bounty. sinfella wants to to this question.

I have ran into an issue, as i'm loading my javascript through the interop onAfterRenderAsync method, I can't get my javascript to load (on page load).. The javascript only works once I have clicked onto the page.. I know why this is, obviously because my javascript is waiting for a onclick function...
But I want to avoid this and have the javascript load without myself having to attach an onclick function.
Can anyone help?

So basically, I have a navbar with a burger expander ( to show or hide my sidebar ), but this only works, once I have clicked onto the screen.
I want it to work straight away...

Here is the javascript:

function LoadContent() {
    function LoadContent() {
    document.addEventListener("DOMContentLoaded", document.onclick = function(event) {
      const showNavbar = (toggleId, navId, pId, headerId) => {
        const toggle = document.getElementById(toggleId),
        nav = document.getElementById(navId),
        bodypd = document.getElementById(pId),
        headerpd = document.getElementById(headerId);
        mainbodypd = document.getElementById("mainbody");
                      
        if (toggle && nav && bodypd && headerpd && mainbodypd) {
          
          toggle.addEventListener("click", () => {
            nav.classList.toggle("show");
            toggle.classList.toggle("bx-x");
            bodypd.classList.toggle("body-pd");
            headerpd.classList.toggle("body-pd");
            mainbodypd.classList.toggle("height-100short");
          });
        }
      };
      showNavbar("header-toggle", "nav-bar", "body-pd", "header");
      const linkColor = document.querySelectorAll(".nav_link");
      
      function colorLink() {
        if (linkColor) {
          linkColor.forEach(l => l.classList.remove("active"));
          this.classList.add("active");
        }
      }
      linkColor.forEach(l => l.addEventListener("click", colorLink));
    });     
  }
}

And Blazor:

protected override async Task OnAfterRenderAsync(bool firstRender){
  if (firstRender){
    await JS.InvokeVoidAsync("LoadContent");
    await JS.InvokeVoidAsync("ToolTipInit");
    StateHasChanged();
  }
}

Answer 1

You can try this method. Create a JavaScript file in your root folder or anywhere in wwwwroot folder, for example "MyCode.js". Copy your JavaScript function in there but add export at the beginning. It should be something like this:

export function LoadContent() {

Compeletly remove your document.addEventListener("DOMContentLoaded, document.onclick part from your code and save the file.

Inject IJSRuntime to your Blazor component like this:

@inject IJSRuntime JSRuntime

In your Code section of your Blazor component add this code:

    protected override async Task OnAfterRenderAsync(bool firstRender)
{
    await using var module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./MyCode.js");
    await module.InvokeVoidAsync("LoadContent");
}