Blazor .NET 5如何实现仅指定Razor页面可加载使用专属JS文件

前置操作 #

先删除你之前在_host.cshtml中添加的全局JS引用代码：<script src="/MyJavaScript.js"></script>，避免全局加载。
将MyJavaScript.js放在项目wwwroot目录下，比如新建子目录js存放，最终路径为wwwroot/js/MyJavaScript.js。

推荐方案：使用.NET 5原生JS模块隔离 #

这种方式不会暴露全局JS方法，仅当前组件可调用，且仅当组件加载时才会请求JS文件，完全符合你的需求。

步骤1：改造JS文件为ES模块格式 #

修改MyJavaScript.js代码，将方法导出，避免挂载到全局window对象：

export function myfunction() {
  alert("Hello");
}

步骤2：在mypage.razor中按需加载调用 #

组件代码如下：

@page "/mypage"
@inject IJSRuntime JS
@implements IAsyncDisposable

<!-- 页面其他内容 -->
<button @onclick="CallMyFunction">触发JS方法</button>

@code {
    // 存储JS模块引用
    private IJSObjectReference? _jsModule;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        // 仅首次渲染时加载JS模块
        if (firstRender)
        {
            _jsModule = await JS.InvokeAsync<IJSObjectReference>("import", "/js/MyJavaScript.js");
        }
    }

    // 调用JS方法的封装
    private async Task CallMyFunction()
    {
        if (_jsModule != null)
        {
            await _jsModule.InvokeVoidAsync("myfunction");
        }
    }

    // 组件销毁时释放JS模块，避免内存泄漏
    public async ValueTask DisposeAsync()
    {
        if (_jsModule != null)
        {
            await _jsModule.DisposeAsync();
        }
    }
}

方案说明 #

• 仅当用户访问/mypage路径加载对应组件时，才会发起请求加载MyJavaScript.js，其他页面不会加载该文件
• 由于是ES模块导出，myfunction不会暴露为全局方法，其他页面没有导入逻辑的前提下完全无法调用该方法
• 无需在Razor组件内编写<script>标签，不会触发如下报错：
  

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