.NET MAUI Blazor中从Blazor页面直接调用JS函数失败的问题

我完全懂你遇到的困扰——明明已经能通过JS模块调用成功，却没法在Blazor页面里用原生onclick="hello()"直接触发JS函数，试了各种方法都不行，确实挺磨人的。咱们一步步拆解问题，找到解决办法：

先搞懂核心原因 #

Blazor的组件渲染机制和普通Web页面不一样，加上MAUI Blazor的WebView环境对JS的加载有特殊规则：

• 直接用原生onclick绑定的话，可能Blazor还没完成JS环境初始化，或者你的JS函数不在全局作用域里，导致组件找不到它；
• 你之前用的import方式是JS隔离模式，模块里的函数默认不会暴露到全局，自然没法直接通过原生事件调用。

解决方法一：让JS函数全局可访问（适合简单场景） #

如果你坚持要用原生onclick触发，得做这两步：

1. 修正脚本加载顺序与路径
   打开index.html，把自定义JS脚本放在blazor.webview.js之前加载，同时注意MAUI Blazor里wwwroot是根目录，路径不用加~/：

   <script src="/js/BFA.js"></script>
   <script src="_framework/blazor.webview.js"></script>
   </body>
   </html>
   

   别随便加autostart="false"，除非你有手动启动Blazor的需求——如果加了，就得在你的JS脚本末尾手动启动：

   window.addEventListener('DOMContentLoaded', () => {
       Blazor.start();
   });
   

2. 把JS函数挂载到全局作用域
   在BFA.js里，要把hello函数显式挂到window对象上，这样全局才能访问到：

   window.hello = function() {
       console.log("Hello from JS!");
       // 你的逻辑代码
   };
   

解决方法二：用Blazor风格的事件绑定（推荐） #

其实更符合Blazor开发习惯的是用组件自身的事件绑定，再通过JS模块调用函数，既安全又可控：
在display.blazor里这么写：

<input type="button" @onclick="TriggerHelloJs" value="Display">

@code {
    [Inject]
    private IJSRuntime JsRuntime { get; set; }
    private IJSObjectReference _jsModule;

    protected override async Task OnInitializedAsync()
    {
        // 导入你的JS模块
        _jsModule = await JsRuntime.InvokeAsync<IJSObjectReference>("import", "/js/script.js");
    }

    private async Task TriggerHelloJs()
    {
        // 调用模块里的hello函数
        await _jsModule.InvokeVoidAsync("hello");
    }

    // 记得释放模块资源
    public async ValueTask DisposeAsync()
    {
        if (_jsModule != null)
        {
            await _jsModule.DisposeAsync();
        }
    }
}

关于你尝试过的其他方法的补充 #

• display.blazor.js的用法：Blazor支持组件关联的JS文件，但这种文件里的函数是模块级别的，不会暴露到全局，必须通过模块引用调用，没法直接用onclick="hello()"触发；
• csproj的设置：你移除<Content Remove="wwwroot\js\" />是对的——这个配置会把wwwroot/js下的文件排除出打包列表，导致应用找不到这些JS文件，移除后才能正常加载。

备注：内容来源于stack exchange，提问作者DottoreM