Blazor中加载所有组件后如何加载脚本标签

Question

In wwwroot/index.html (Blazor WebAssembly) or Pages/_Host.cshtml (Blazor Server) we can add a <script src="?"/> tag.在wwwroot/index.html (Blazor WebAssembly) 或Pages/_Host.cshtml (Blazor Server) 中，我们可以添加一个<script src="?"/>标签。

<body>
    ...

    <script src="_framework/blazor.{webassembly|server}.js"></script>
    <script src="?"></script> // I want to load this script after all components/site completely loaded.
</body>

But the problem is the <script src="?"/> tag just loaded but I want to load it after loading all components of Blazor. (Some functions inside the script cannot find some elements)但是问题是<script src="?"/>标签刚刚加载但是我想在加载Blazor的所有组件之后加载它。（脚本中的某些函数找不到某些元素）

There is a way to load a JS function like below有一种方法可以像下面这样加载 JS function

@page "/"

 @inject IJSRuntime JSRuntime

    <div>
        this is index page
    </div>
@code {

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("initilizeNiceAdminJs");// Initialize main.js after site completely loaded
        }
    }
}

The OnAfterRenderAsync method helps us to load a JS function after loading entire components in the Blazor. OnAfterRenderAsync方法帮助我们在加载 Blazor 中的所有组件后加载一个 JS function。

Does exist any way to do the same with a <script src="?"/> tags instead of a function?是否存在任何方法可以用<script src="?"/>标签而不是 function 做同样的事情？

Answer 1

You have several ways to do this你有几种方法可以做到这一点

Inject a script after Blazor starts this is used to load js after blazor app started Blazor启动后注入一个脚本，用于blazor app启动后加载js
Load a script from an external JavaScript file (.js) collocated with a component on this way you can define a javascript file for each compponent 从与组件并置的外部 JavaScript 文件 (.js) 加载脚本，您可以为每个组件定义一个 javascript 文件
use your own javascript loader使用你自己的 javascript 装载机

this code can invoke callback function from blazor app.此代码可以从 blazor 应用程序调用回调 function。 for this you must register your instance first and you can call it from your blazor app为此，您必须先注册您的实例，然后您可以从您的 blazor 应用程序调用它

App = {};

App.LoadScript = (function (Url, Instance, CallBack) {
    var head = document.head;
    var IsExist = false;
    var Scripts = head.getElementsByTagName('script');
    for (var i = Scripts.length; i--;) {
        var Src = Scripts[i];
        if (Src.src == Url || Src.src.replace(Src.baseURI, '') == Url) {
            IsExist = true;
            break;
        }
    }
    if (!IsExist) {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = Url;
        if (CallBack && Instance) {
            script.onload = setTimeout(() => { App.CsharpInvoker(Instance, CallBack); }, 3000);
        }
        else if (CallBack)
            script.onload = setTimeout(() => { CallBack(); }, 1000);

        head.appendChild(script);
    }
    else if (CallBack && Instance)
        setTimeout(() => { App.CsharpInvoker(Instance, CallBack); }, 1000);
    else if (CallBack)
        setTimeout(() => { CallBack(); }, 1000);
});

App.CsharpInvoker = (function CSharpCallBackInvoker(Instance, MethodName, Parameter) {
    Instance.invokeMethodAsync(MethodName, Parameter);
});

Blazor中加载所有组件后如何加载脚本标签

问题描述

1 个解决方案

解决方案1
2 已采纳 2022-03-05 10:43:14

Blazor中加载所有组件后如何加载脚本标签

问题描述

1 个解决方案

解决方案1 2 已采纳 2022-03-05 10:43:14

解决方案1
2 已采纳 2022-03-05 10:43:14