将Blazor JS脚本转换为Blazor组件

Question

将Blazor JS脚本转换为Blazor组件

javascriptblazor

4

我正在构建一个Blazor应用程序，需要动态添加一个仅在单个Blazor组件中使用的JavaScript文件。正如您所知，Blazor只允许将脚本标签添加到根HTML文档中。这使得添加仅在单个组件中需要的JavaScript文件变得困难。

该脚本是：

很重要的一点是，在脚本标签上设置data-main="payment-js"属性。

在Blazor中，是否存在任何关于iframe渲染的限制？该脚本作为符合PCI的支付系统集成的一部分，在特定的Blazor组件中呈现多个iframes。

该脚本在简单的HTML文件中有效。

非常感谢您的帮助。

- datateam

脚本为<script data-main="payment-js" src="https://gateway.tillpayments.com/js/integrated/payment.1.3.min.js"></script> - datateam

3个回答

2

这可以通过使用脚本加载器和JSRuntime来实现。请查看此链接。

- mojorisinify

1

尝试在JavaScript模块中使用JavaScript隔离：

https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/?view=aspnetcore-7.0#javascript-isolation-in-javascript-modules&WT.mc_id=DT-MVP-5005078

将 payment.1.3.min.js 下载至您的 wwwroot 文件夹，尝试使用以下代码：

public partial class Demos : IAsyncDisposable
{

    [Inject] IJSRuntime? JS { get; set; }
    private IJSObjectReference? module;



    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        try
        {
            if (firstRender)
            {
                module = await JS!.InvokeAsync<IJSObjectReference>("import", "./payment.1.3.min.js" + "?v=" + System.Reflection.Assembly.GetExecutingAssembly().GetName().Version);
                Instance = DotNetObjectReference.Create(this);
             }
        }
        catch (Exception e)
        {
            if (OnError != null) await OnError.Invoke(e.Message);
        }
    }

    public virtual async Task DoSomePayment(string fileName, string fileURL)
    {
        await module!.InvokeVoidAsync("payment1234", fileName, fileURL);
    }

    async ValueTask IAsyncDisposable.DisposeAsync()
    {
        if (module is not null)
        {
            await module.DisposeAsync();
        }
    }
}

- Alex Chow

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dimitris Maragkos · Accepted Answer

编辑：

或许可以使用MarkupString来帮助实现：

@((MarkupString)script)

@code {
    string script = "<script data-main="payment-js" src="gateway.tillpayments.com/js/integrated/…>";
}

新答案：

您可以使用特殊的HeadContent组件，将脚本添加到您的组件中的<head>标签中。

注：该组件可以帮助您在自己的组件中添加头部内容，包括CSS和JavaScript等。

<HeadContent>
    <script suppress-error="BL9992" data-main="payment-js" src="gateway.tillpayments.com/js/integrated/…>
</HeadContent>

您需要添加属性suppress-error="BL9992"，以便它不会给您带来错误RZ9992。

更多信息请参见：https://learn.microsoft.com/en-us/aspnet/core/blazor/components/control-head-content?view=aspnetcore-6.0#control-head-content-in-a-razor-component 此外，还有这个库可用于在Blazor中加载脚本：https://github.com/excubo-ag/Blazor.ScriptInjection