文档连接:在 ASP.NET Core Blazor 中从 .NET 方法调用 JavaScript 函数 | Microsoft Docs
Blazor 在标准 JavaScript 模块（ECMAScript 规范）中启用 JavaScript (JS) 隔离。
JS 隔离具有以下优势：
导入的 JS 不再污染全局命名空间。
库和组件的使用者不需要导入相关的 JS。
例如，以下 JS 模块导出用于显示浏览器窗口提示的 JS 函数。 将以下 JS 代码置于外部 JS 文件中。
wwwroot/scripts.js:
JavaScript复制
exportfunctionshowPrompt(message){returnprompt(message,'Type anything here');}
将前面的 JS 模块作为 wwwroot 文件夹中的静态 Web 资产添加到应用或类库中，然后通过调用 IJSRuntime 实例上的 InvokeAsync 将该模块导入 .NET 代码。
IJSRuntime 将模块作为 IJSObjectReference 导入，它表示对 .NET 代码中 JS 对象的引用。 使用 IJSObjectReference 调用从模块导出的 JS 函数。
Pages/CallJsExample6.razor:
razor复制
@page "/call-js-example-6"@implements IAsyncDisposable@inject IJSRuntime JS
Call JS Example 6
Trigger browser window prompt
@result
@code {privateIJSObjectReference module;privatestringresult;protectedoverrideasyncTaskOnAfterRenderAsync(boolfirstRender){ if (firstRender) {module = await JS.InvokeAsync("import","./scripts.js");} }privateasyncTaskTriggerPrompt(){ result = await Prompt("Provide some text"); }publicasyncValueTaskPrompt(stringmessage){return await module.InvokeAsync("showPrompt", message);}asyncValueTask IAsyncDisposable.DisposeAsync(){ if (module is not null) { await module.DisposeAsync(); } }}
在上面的示例中：
按照约定，import 标识符是专门用于导入 JS 模块的特殊标识符。
使用稳定的静态 Web 资产路径 ./{SCRIPT PATH AND FILENAME (.js)} 指定该模块的外部 JS 文件，其中：
若要创建 JS 文件的正确静态资产路径，需要当前目录 (./) 的路径段。
{SCRIPT PATH AND FILENAME (.js)} 占位符是 wwwroot 下的路径和文件名。
动态导入模块需要网络请求，因此只能通过调用 InvokeAsync 来异步实现。
IJSInProcessObjectReference 表示对某个 JS 对象的引用，该对象的函数可以同步进行调用。
备注
当外部 JS 文件由 Razor 类库提供时，使用其稳定的静态 Web 资产路径 ./_content/{PACKAGE ID}/{SCRIPT PATH AND FILENAME (.js)} 指定模块的 JS 文件：
若要创建 JS 文件的正确静态资产路径，需要当前目录 (./) 的路径段。
{PACKAGE ID} 占位符是库的包 ID。 如果项目文件中没有指定 <PackageId>，则包 ID 默认为项目的程序集名称。 在下面的示例中，库的程序集名称为 ComponentLibrary，并且库的项目文件未指定 <PackageId>。
{SCRIPT PATH AND FILENAME (.js)} 占位符是 wwwroot 下的路径和文件名。 在以下实例中，外部 JS 文件 (script.js) 置于类库的 wwwroot 文件夹中。
C#复制
varmodule =awaitjs.InvokeAsync("import","./_content/ComponentLibrary/scripts.js");
有关详细信息，请参阅 使用 Razor 类库中的 ASP.NET Core Razor 组件。
