Blazor JS scripts into a blazor component

Question

I am building a Blazor app, I need to dynamically add a JavaScript file that is used only in a single Blazor component. As you would be aware Blazor allows adding script tags only to the root HTML document. This makes it difficult to add JavaScript files that are required only in a single component.

The script is

It is important to set the data-main="payment-js" attribute on the script tag.

Are there any restrictions around iframe rendering in Blazor? The script renders multiple iframes on the specific Blazor components as part a PCI compliant payment system integration.

The script works in a simple HTML file.

I would be grateful for any assistance

The script is <script data-main="payment-js" src="gateway.tillpayments.com/js/integrated/…> — datateam
– datateam, Commented Jul 30, 2022 at 23:43

Dimitris Maragkos · Accepted Answer · 2022-08-14 23:14:48Z

4

Edit:

Maybe MarkupString could help:

@((MarkupString)script)

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

Old answer:

You could use the special HeadContent component to add the script in the <head> tag from your component.

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

You have to add attribute suppress-error="BL9992" so that it won't give you Error RZ9992.

More info: https://learn.microsoft.com/en-us/aspnet/core/blazor/components/control-head-content?view=aspnetcore-6.0#control-head-content-in-a-razor-component

Also there is this library for loading scripts in blazor: https://github.com/excubo-ag/Blazor.ScriptInjection

edited Aug 14, 2022 at 23:14

answered Jul 31, 2022 at 0:15

Dimitris Maragkos

11.6k2 gold badges17 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

datateam Over a year ago

I added <HeadContent><script data-main="payment-js" src="gateway.tillpayments.com/js/integrated/…> </HeadContent> to my Blazor component – Now I am getting Error RZ9992 Script tags should not be placed inside components because they cannot be updated dynamically. To fix this, move the script tag to the 'index.html' file or another static location.

Dimitris Maragkos Over a year ago

@datateam Hi, I updated my answer with another possible solution. You can try to add suppress-error="BL9992" attribute or use MarkupString approach.

Alex Chow · Accepted Answer · 2023-03-15 16:53:09Z

try JavaScript isolation in JavaScript modules:

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

download payment.1.3.min.js to your wwwroot, and try this codes

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();
        }
    }
}

mojorisinify · Accepted Answer · 2022-09-13 18:26:27Z

1

This can be achieved by using a script loader and JSRuntime. Check this out.

answered Sep 13, 2022 at 18:26

mojorisinify

4056 silver badges22 bronze badges

1 Comment

Kissaki Over a year ago

Dead website - 502 Bad Gateway

Collectives™ on Stack Overflow

Blazor JS scripts into a blazor component

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related