Javascript in Razor component-CodePudding

I am trying to load a javascript function on load in a razor component but I am getting an error.

@inject IJSRuntime JsRuntime

@if (listProducts != null)
{
    <table >
        <thead>
            <tr>
                <th>Name</th>
                <th>Home place</th>
                <th>Expiration</th>
                <th>Phone number</th>
                <th>Tea</th>
                <th>Local</th>
                <th>App</th>
                <th>Company /Lease</th>
                <th>Road time</th>
                <th>Notes</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach(var product in this.listProducts)
            {
                <ProductItemComponent 
                    Product="product"
                    OnProductDeleted="OnProductDeleted"></ProductItemComponent>
            }
        </tbody>
    </table>    
}

@code {

    protected override async Task OnInitializedAsync()
    {
        await LoadProducts();
        await JsRuntime.InvokeVoidAsync("exampleJsFunctions.DisableCopy");
    }
}

At the beginning I am injecting IJSRuntime like so @inject IJSRuntime JsRuntime and in the OnInitializedAsync() I am calling my function which is in _Layout.cshtml which looks something like this

<script>
        window.exampleJsFunctions =
            {
                DisableCopy: function (data) {
                    if (document.layers) {
                        document.captureEvents(Event.MOUSEDOWN);
                        document.onmousedown = clickNS4;
                    }
                    else if (document.all && !document.getElementById) {
                        document.onmousedown = clickIE4;
                    }
                  }}
    
    </script>

and this is the error in console

Any ideas on what's wrong?

CodePudding user response：

Here is a demo about calling js in blazor:

wwwroot/js/test.js(put the js code into js file of wwwroot)：

window.exampleJsFunctions =
            {
                DisableCopy: function (data) {
                    if (document.layers) {
                        document.captureEvents(Event.MOUSEDOWN);
                        document.onmousedown = clickNS4;
                    }
                    else if (document.all && !document.getElementById) {
                        document.onmousedown = clickIE4;
                    }
                  }}

Pages/_Host.cshtml(add reference of test.js in _Host.cshtml):

...
<html lang="en">
<head>
    ...
</head>
<body>
  ...
    <script src="~/js/test.js"></script>
</body>
</html>

Don't call js in OnInitializedAsync().The component is being statically rendered.SO JavaScript interop calls cannot be issued at this time.So you can call it in OnAfterRender.

razor component:

@inject IJSRuntime JsRuntime
@code {
   protected override void OnAfterRender(bool firstRender)
{
    JsRuntime.InvokeVoidAsync("exampleJsFunctions.DisableCopy");
}
}