如何从 razor 组件调用 javascript 对象的方法？

Question

我正在我的第一个Blazor项目上工作，并且有一些困难，从我的Blazor服务器应用程序的一个页面集成和启动此凝视检测． 注视检测网站声明，在将webgazer javascript文件集成到您的网站后，您可以通过调用webgazer.begin()来启动webgazer。． 我试了很多次，但还是没能成功。

下面是我到目前为止所做的尝试:

我把webgazer.js在一个名为"js"在"wwwroot"并在_Hosts.cshtml:

中添加了script标签

@page "/"
@namespace CalculatorWebApp.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = "_Layout";
}
<component type="typeof(App)" render-mode="ServerPrerendered" />
<script src="_framework/blazor.server.js"></script>
<script src="~/js/webgazer.js"></script>

在剃须刀组件上称为"校准";我想开始的webgazer，当一个按钮被点击。因此，我尝试这样做:

@page "/Calibration"
@inject IJSRuntime JS
<h1>Calibration</h1>

<p>
<button @onclick="TriggerWebgazer">Start WebGazer</button>
</p>
@code {

private async Task TriggerWebgazer()
{
await JS.InvokeAsync<IJSObjectReference>("import", "~/js/webgazer.js");
await JS.InvokeAsync<object>("webgazer.begin()");
}
public async ValueTask DisposeAsync() => await this.DisposeAsync();
}

但是我得到这些错误:

blazor.server.js:1 [2022-12-07T00:25:09.239Z] Error: There was an error applying batch 2.
log @ blazor.server.js:1
blazor.server.js:1 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'removeChild')
at H (blazor.server.js:1:17228)
at blazor.server.js:1:20455
at ie.updateComponent (blazor.server.js:1:20480)
at blazor.server.js:1:115262
at Pn.processBatch (blazor.server.js:1:115634)
at kt.<anonymous> (blazor.server.js:1:129816)
at blazor.server.js:1:72077
at Array.forEach (<anonymous>)
at kt._invokeClientMethod (blazor.server.js:1:72063)
at kt._processIncomingData (blazor.server.js:1:70105)
blazor.server.js:1 [2022-12-07T00:25:09.383Z] Error: System.AggregateException: One or more errors occurred. (TypeError: Cannot read properties of null (reading 'removeChild'))
---> System.InvalidOperationException: TypeError: Cannot read properties of null (reading 'removeChild')
at Microsoft.AspNetCore.Components.RenderTree.Renderer.InvokeRenderCompletedCallsAfterUpdateDisplayTask(Task updateDisplayTask, Int32[] updatedComponents)
--- End of inner exception stack trace ---

我做错了什么?感谢每一个帮助!

Answer 1

您应该在blazor.server.js之前引用您的脚本，如下所示:

<script src="~/js/webgazer.js"></script>
<script src="_framework/blazor.server.js"></script>