使用 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