如何在.NET MAUI Blazor Hybrid应用中使用JavaScript？报错求助

你遇到的错误是因为Blazor组件的动态渲染机制导致的——组件内直接放置<script>标签无法被框架正确处理和动态更新，所以需要改用以下几种合规的方式引入JS：

方法一：全局脚本放在wwwroot/index.html中 #

这是最直接的全局加载方式，适合需要在整个应用中使用的脚本：

• 打开项目中的wwwroot/index.html文件
• 在<head>标签末尾或<body>标签闭合前添加脚本标签，示例：

  <!-- 在head末尾添加 -->
  <head>
    <!-- 其他head内容 -->
    <script src="js/common.js"></script>
  </head>
  
  <!-- 或在body闭合前添加 -->
  <body>
    <div id="app"></div>
    <script src="_framework/blazor.webview.js"></script>
    <script src="js/another-script.js"></script>
  </body>
  

• 脚本会在应用启动时加载，全局范围内可调用。

方法二：使用Blazor JS隔离（组件专属脚本） #

如果脚本只属于某个组件，推荐使用JS隔离，避免全局污染：

1. 为目标组件创建同名的.js文件，比如组件是ProductCard.razor，就创建ProductCard.razor.js，放在同一目录下
2. 在组件中注入IJSRuntime并加载隔离脚本：

   @inject IJSRuntime JS
   @implements IAsyncDisposable
   
   <!-- 组件内容 -->
   
   @code {
       private IJSObjectReference? jsModule;
   
       protected override async Task OnInitializedAsync()
       {
           // 加载组件专属脚本
           jsModule = await JS.InvokeAsync<IJSObjectReference>(
               "import", "./ProductCard.razor.js");
       }
   
       // 调用脚本中的方法示例
       private async Task CallComponentScript()
       {
           if (jsModule != null)
           {
               await jsModule.InvokeVoidAsync("showProductDetails");
           }
       }
   
       // 释放脚本资源
       async ValueTask IAsyncDisposable.DisposeAsync()
       {
           if (jsModule != null)
           {
               await jsModule.DisposeAsync();
           }
       }
   }
   

3. 在.razor.js文件中编写组件专属的JS逻辑：

   export function showProductDetails() {
       alert("产品详情");
   }
   

方法三：动态按需加载脚本 #

如果需要在特定时机（比如用户交互后）加载脚本，可以通过IJSRuntime动态创建脚本标签：

@inject IJSRuntime JS

<button @onclick="LoadDynamicScript">加载动态脚本</button>

@code {
    private async Task LoadDynamicScript()
    {
        await JS.InvokeVoidAsync(@"
            const scriptUrl = arguments[0];
            // 先检查脚本是否已加载
            if (!document.querySelector(`script[src='${scriptUrl}']`)) {
                const script = document.createElement('script');
                script.src = scriptUrl;
                script.async = true;
                document.head.appendChild(script);
            }
        ", "./js/dynamic-script.js");
    }
}

内容的提问来源于stack exchange，提问作者essa