开发者

How do I call a javascript object's method from a razor component?

开发者 https://www.devze.com 2022-12-07 22:27 出处:网络
I\'m working on my first Blazor project and have some difficulties to integrate and start this gaze detection from one of the pages of my blazor server app. The gaze detection website states, that aft

I'm working on my first Blazor project and have some difficulties to integrate and start this gaze detection from one of the pages of my blazor server app. The gaze detection website states, that after integrating the webgazer javascript file in your website, you can start the webgazer by calling webgazer.begin(). I tried a lot, but still can't manage to make it work.

Here is what I trid so far:

I placed the webgazer.js in a folder called "js" in "wwwroot" and added the script tag in _Hosts.cshtml:

@page "/"
@namespace CalculatorWebApp.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = "_Layout";
}

<component type="typeof(App)" render-开发者_如何学Gomode="ServerPrerendered" />

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

On the razor component called "Calibration" I want to start the webgazer, when a button is clicked. Therefore, I tried something like this:

@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();

}

But then I get these errors:

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

What am I doing wrong? Every help is appreciated!


You should reference your script before blazor.server.js as follows:

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

精彩评论

暂无评论...
验证码 换一张
取 消