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

Question

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

And*_*era 1 javascript c# blazor blazor-webassembly

我尝试调用一个 JS 函数。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>

Run Code Online (Sandbox Code Playgroud)

我想用 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*@);
}

Run Code Online (Sandbox Code Playgroud)

对于组件中的每个 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)

Run Code Online (Sandbox Code Playgroud)

更新

2021 年 5 月 8 日：index.html

正如评论中所写（使用 Blazor 调用 JavaScript 函数（来自外部库）），我想注入myscriptA.js并且myscriptB.js只在Page3.razor文件中而不是在另一个文件中（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

Cor*_*jil 6

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

剃须刀页面：

@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}");
    }
}

Run Code Online (Sandbox Code Playgroud)

MyScript.js 文件：

import "./myScriptWithUsefulCodes.min.js";

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

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	4 年，6 月前
查看次数：	658 次
最近记录：	4 年，6 月前