加载Javascript Blazor组件 [英] Load Javascript Blazor component

问题描述

我正在尝试将.netcore网站转换为BlazorSPA..80％的工作已完成.我的Facebook赞/共享"按钮未通过.razor页面显示.我在.razor页面中的index.html中放置了Facebook javascript，并在.razor页面中放置了"Div".

I'm trying to convert my .netcore website into Blazor SPA..80% work is complete. My Facebook Like/Share button is not getting display through .razor page. I put below facebook javascript in index.html and facebook "Div" in my .razor page.

<script>
    (function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.10&appId=00000000000000';
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>

我认为问题是Facebook javascript在blazor内容呈现在DOM之前执行.有什么方法只能将组件javascript与该组件绑定，所以当我的facebook组件显示时，只有facebook javascript会运行?

I think issue is Facebook javascript execute before blazor content render on DOM. Is there any way to bind component javascript with that component only so when my facebook component will display then only facebook javascript will run ?

推荐答案

您可以通过OnAfterRenderAsync方法使用JSInterop调用，如下所示:

You can use JSInterop call from the OnAfterRenderAsync method, like this:

 @page "/"
 @inject IJSRuntime jsRuntime

 <h1 id="myid" @ref=MyElementReference>Hello, world!</h1>


@code{
    ElementReference MyElementReference;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeAsync<object>("MyJSMethods.myMethod", MyElementReference);
        }

    }
}

注意:您需要注入JSRuntime对象才能执行JSInterop调用.

Note: You need to inject the JSRuntime object in order to execute JSInterop calls.

渲染组件后，必须调用JavaScript代码.渲染完组件后，将调用OnAfterRenderAsync方法，因此您可以在此处放置代码以初始化组件.当firstRender为true时，应该是这样；当firstRender为false时，应该是对JavaScript对象的多次调用.

You have to call your JavaScript code after your components have been rendered. The OnAfterRenderAsync method is called after the component has been rendered, and thus you can put code here to initialize your component. This should be when firstRender is true, and multiple calls to your JavaScript objects, when firstRender is false.

将脚本放置在_Host.cshtml文件的底部，正好位于

Place your script at the bottom of the _Host.cshtml file, just below

<script src="_framework/blazor.server.js"></script>
<script>
        window.MyJSMethods =
        {
            myMethod: function (element) {
                window.alert(element.id);
            }
        };
    </script>

请注意，函数使用的名为 element 的参数是元素对象，因为我们在Blazor中将参数定义为ElementReference.当然，您可以传递元素ID.

Note that the parameter named element that the function takes is an element object because we defined the argument as ElementReference in Blazor. Of course, you could've passed the element id.

这篇关于加载Javascript Blazor组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！