在 _Host.cshtml 中使用变量答案

【问题标题】：Using a variable in _Host.cshtml在 _Host.cshtml 中使用变量
【发布时间】：2020-12-29 16:51:04
【问题描述】：

我有一个应用程序，它在 _Host.cshtml 上的 head 标记中加载来自 3rd 方供应商的 JavaScript 库。根据浏览器请求，我需要换出 src 属性并加载不同的库，因为 src 链接会改变。

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PictometryHost</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />

<!-- include the IPA JS Library from pictometry -->
<script type="text/javascript" src="http://pol.pictometry.com/ipa/v1/embed/host.php?apikey=someapikey"></script> <----This right here I need to change on the fly.
<script src="~/Pictometry.js"></script>

在我的 index.razor 页面上，我创建了一个属性 IpaJsLibUrl，它将加载正确的 src 属性链接。

如果可能的话，我只想将此属性注入脚本标记中的 src 属性。但是我可以动态地将这个 src 属性更改为我想要的任何方式都很棒！

【问题讨论】：

标签： javascript blazor blazor-server-side

【解决方案1】：

有一种方法可以在页面中动态加载脚本。但是你建议的方式是行不通的。相反，请使用我在另一个 StackOverflow answer 上找到的以下过程：

创建一个名为scriptLoader.js的js文件

// loadScript: returns a promise that completes when the script loads
window.loadScript = function (scriptPath) {
    // check list - if already loaded we can ignore
    if (loaded[scriptPath]) {
        console.log(scriptPath + " already loaded");
        // return 'empty' promise
        return new this.Promise(function (resolve, reject) {
            resolve();
        });
    }

    return new Promise(function (resolve, reject) {
        // create JS library script element
        var script = document.createElement("script");
        script.src = scriptPath;
        script.type = "text/javascript";
        console.log(scriptPath + " created");

        // flag as loading/loaded
        loaded[scriptPath] = true;

        // if the script returns okay, return resolve
        script.onload = function () {
            console.log(scriptPath + " loaded ok");
            resolve(scriptPath);
        };

        // if it fails, return reject
        script.onerror = function () {
            console.log(scriptPath + " load failed");
            reject(scriptPath);
        }

        // scripts will load at end of body
        document["body"].appendChild(script);
    });
}
// store list of what scripts we've loaded
loaded = [];

上述代码的目的是在我们想要的时候在页面上创建一个<script>标签，例如当打开一个新页面时。

接下来，让我们注入并使用著名的IJsRuntime接口与上面的js文件对话：

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        // invoke script loader
        await jsRuntime.InvokeVoidAsync("loadScript", "https://code.jquery.com/jquery-3.4.1.js");
        await jsRuntime.InvokeVoidAsync("loadScript", "myJQueryTest.js");

        await jsRuntime.InvokeVoidAsync("setH1", "Hello world!");
    }

如您所见，我们已经加载了 2 个 js 文件，一个 jquery 库，另一个是我们自定义的 myJQueryTest.js js 文件。并且还可以在我们的自定义库中使用 setH1 方法：

window.setH1 = function (message) {
    $('h1').text(message);
}

【讨论】：