使用 Blazor 调用 JavaScript function（来自外部库）

Question

我尝试调用 JS function。 JS 脚本由第三方提供。

在简单的 HTML/JS 中，我可以编写：

<html>
    <head>
        <script src="myscriptA.js"></script>
        <script src="myscriptB.js"></script>
    </head>
    <body>
        <div id="foo"></div>
        <div id="bar"></div>
        <script>
            var viewer = new foo.Viewer('foo', /*other params*/);
            viewer.function1().then(() => { /*ommited code*/ }).catch((error) => { console.log(error)});
            document.getElementById('bar').addEventListener('click', event => {
                var b1 = new B('bar', /*params*/)});
                var b2 = new B('foo');
            viewer.addB(b1, b2, { click: function(e) { viewer.function2() } });
        </script>
    </body>
</html>

我想对 Blazor 做同样的事情。 目前，我可以使用我的组件访问myscriptA.js文件：

Page3.razor

@page "/Page3"
@inject IJSRuntime JS
@code {
    var scriptA = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./js/myscriptA.js");
    var foo = await JSRuntime.InvokeAsync<IJSObjectReference>("new foo.Viewer", scriptA);
    // I have try:
    var foo = await JSRuntime.InvokeAsync<IJSObjectReference>("new foo.Viewer", "foo", @*other params*@);
    var foo = await JSRuntime.InvokeAsync<IJSObjectReference>("foo.Viewer", "foo", @*other params*@);
    var foo = await JSRuntime.InvokeAsync<IJSObjectReference>("Viewer", "foo", @*other params*@);
    var foo = await JSRuntime.InvokeAsync<IJSObjectReference>("new Viewer", "foo", @*other params*@);
}

对于我的组件中的每个 C# foo 变量，我的浏览器控制台显示：

blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Could not find 'new foo.Viewer' ('new foo' was undefined).
      Error: Could not find 'new foo.Viewer' ('new foo' was undefined).
          at https://localhost:5001/_framework/blazor.webassembly.js:1:1287
          at Array.forEach (<anonymous>)
          at e.findFunction (https://localhost:5001/_framework/blazor.webassembly.js:1:1247)
          at b (https://localhost:5001/_framework/blazor.webassembly.js:1:2989)
          at https://localhost:5001/_framework/blazor.webassembly.js:1:3935
          at new Promise (<anonymous>)
          at Object.beginInvokeJSFromDotNet (https://localhost:5001/_framework/blazor.webassembly.js:1:3908)
          at Object.w [as invokeJSFromDotNet] (https://localhost:5001/_framework/blazor.webassembly.js:1:64232)
          at _mono_wasm_invoke_js_blazor (https://localhost:5001/_framework/dotnet.5.0.4.js:1:190800)
          at do_icall (<anonymous>:wasm-function[10596]:0x194e4e)

更新

2021 年 5 月 8 日：索引.html

As written in the comment ( Call JavaScript function (from external library) with Blazor ), I want to inject myscriptA.js and myscriptB.js only in Page3.razor file and not in another files ( Page1 , Page2 , Page4 , ... ）。

2021 年 5 月 11 日：js 文件

作为 Blazor 组件的 *.css 文件，我尝试添加与我的页面同名的 *.js 文件：

Project.csproj
- Pages文件夹
  - Page1.razor
  - Page2.razor
  - Page2.razor.css <-- 见于Shared\NavMenu.razor
  - Page3.razor
  - Page3.razor.js

我有同样的错误

Answer 1

你已经接近了.. 要仅在需要的地方（例如，特定页面）加载 JS 文件，您需要实现IJSObjectReference接口并正确利用 JavaScript 模块隔离。

Razor 页面：

@inject IJSRuntime JsRuntime

<h1>My Page</h1>

@code{
private IJSObjectReference MyJsModule { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        try
        {
            // Load the JS Helpers Module
            MyJsModule = await JsRuntime.InvokeAsync<IJSObjectReference>("import", "./js/MyScript.js");
        }
        catch (Exception ex)
        {
            Logger.LogError($"Failed to load JS module. Error: {ex}");
        }
    }
}

private async void AddViewer()
{
    try
    {
        await MyJsModule.InvokeVoidAsync("AddViewer", "foo");
    }
    catch (Exception ex)
    {
        Logger.LogError($"Failed to execute JS function. Error: {ex}");
    }
}

MyScript.js 文件：

import "./myScriptWithUsefulCodes.min.js";

export function AddViewer(id) {
    var viewer = new foo.Viewer(id, /*other params*/);
    /* ...Your code... */
}

在此处阅读更多信息： https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-5.0#javascript-isolation-in-javascript-模块

Answer 2

难道你不能在你的 Blazor 页面中加载 JavaScript 文件，就像默认的 Blazor 示例加载.json文件一样吗？

然后使用 IJSRuntime 将该字符串中的内容“执行”为 JavaScript？

使用 Blazor 调用 JavaScript function（来自外部库）

问题描述

更新

2021 年 5 月 8 日：索引.html

2021 年 5 月 11 日：js 文件

2 个解决方案

解决方案1
3 2021-05-14 14:59:44

解决方案2
0 2021-05-12 08:52:18

使用 Blazor 调用 JavaScript function（来自外部库）

问题描述

更新

2021 年 5 月 8 日：索引.html

2021 年 5 月 11 日：js 文件

2 个解决方案

解决方案1 3 2021-05-14 14:59:44

解决方案2 0 2021-05-12 08:52:18

解决方案1
3 2021-05-14 14:59:44

解决方案2
0 2021-05-12 08:52:18