将 Blazor JS 脚本转换为 Blazor 组件答案

【问题标题】：Blazor JS scripts into a blazor component将 Blazor JS 脚本转换为 Blazor 组件
【发布时间】：2022-08-15 07:14:48
【问题描述】：

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

脚本是

在脚本标签上设置 data-main=\"payment-js\" 属性很重要。

Blazor 中的 iframe 渲染是否有任何限制？该脚本在特定 Blazor 组件上呈现多个 iframe，作为 PCI 兼容支付系统集成的一部分。

该脚本在一个简单的 HTML 文件中运行。

我将不胜感激任何帮助

脚本是 <script data-main=\"payment-js\" src=\"gateway.tillpayments.com/js/integrated/…>

【解决方案1】：

编辑：

也许MarkupString 可以帮助：

@((MarkupString)script)

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

老答案：

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

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

你必须添加属性suppress-error="BL9992"，这样它就不会给你错误RZ9992。

还有一个用于在 blazor 中加载脚本的库：https://github.com/excubo-ag/Blazor.ScriptInjection

【讨论】：

我将 <HeadContent><script data-main="payment-js" src="gateway.tillpayments.com/js/integrated/…> </HeadContent> 添加到我的 Blazor 组件中 - 现在我收到错误 RZ9992 脚本标签不应放置在组件内，因为它们不能动态更新。要解决此问题，请将脚本标记移动到“index.html”文件或其他静态位置。
@datateam嗨，我用另一种可能的解决方案更新了我的答案。您可以尝试添加suppress-error="BL9992" 属性或使用MarkupString 方法。