加载 Javascript Blazor 组件

Question

我正在尝试将我的 .netcore 网站转换为 Blazor SPA。80% 的工作已完成。我的 Facebook Like/Share 按钮无法通过 .razor 页面显示。我在 .razor 页面的 index.html 和 facebook "Div" 下方放置了 facebook javascript。

<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 在 DOM 上呈现 blazor 内容之前执行。有什么方法可以仅将组件 javascript 与该组件绑定，这样当我的 facebook 组件显示时，只有 facebook javascript 会运行 ?

Answer 1

您可以从 OnAfterRenderAsync 方法调用 JSInterop，如下所示：

 @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 调用。

您必须在渲染组件后调用 JavaScript 代码。 OnAfterRenderAsync 方法在组件呈现后调用，因此您可以将代码放在这里来初始化您的组件。这应该是当 firstRender 为真时，并且多次调用您的 JavaScript 对象时，当 firstRender 为假时。

将您的脚本放在 _Host.cshtml 文件的底部，就在

下面

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

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

加载 Javascript Blazor 组件

Load Javascript Blazor component

blazor

blazor-client-side