在 blazor 中使用 javascript，直到我點擊頁面才工作

Question

賞金將在 4 天后到期。 此問題的答案有資格獲得+50聲望賞金。 sinfella想引起人們對這個問題的更多關注。

我遇到了一個問題，因為我正在通過互操作onAfterRenderAsync方法加載我的 javascript，我無法讓我的 javascript 加載（在頁面加載時）。ZDE9B9ED78D7E2E1DCEEFFEE780E2F91.9Z 僅在點擊頁面后才有效知道這是為什么，顯然是因為我的 javascript 正在等待 onclick function...
但是我想避免這種情況，並且無需自己附加 onclick function 就可以加載 javascript。
任何人都可以幫忙嗎？

所以基本上，我有一個帶有漢堡擴展器的導航欄（顯示或隱藏我的側邊欄），但這只有在我點擊屏幕后才有效。
我希望它立即工作...

這是 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));
    });     
  }
}

和 Blazor：

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

Answer 1

你可以試試這個方法。 在根文件夾或 wwwwroot 文件夾中的任何位置創建 JavaScript 文件，例如“MyCode.js”。 在那里復制您的 JavaScript function 但在開頭添加導出。 它應該是這樣的：

export function LoadContent() {

從您的代碼中完全刪除您的document.addEventListener("DOMContentLoaded, document.onclick部分並保存文件。

將 IJSRuntime 注入到您的 Blazor 組件中，如下所示：

@inject IJSRuntime JSRuntime

在 Blazor 組件的代碼部分添加以下代碼：

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