将服务器端 razor 布尔值与客户端布尔值结合起来以包含 link

Question

我有一种情况需要根据客户端布尔值和服务器端布尔值决定包含 html link，如下所示：

const preloadSupported = () => {
              const link = document.createElement('link');
              const relList = link.relList;
              if (!relList || !relList.supports)
                return false;
              return relList.supports('preload');
            };

if (!@Model.oldLayout && preloadSupported())
{
    <link rel="preload" href="staticResource.js" as="script" />
}

或

if (@Model.oldLayout) //server side boolean
{
    if (preloadSupported()) // client side boolean
    {
        @foreach (var url in Model.cssUrls)
        {
            <link rel="preload" href="@Html.StaticFile(url)" as="script"/>
        }
    }
    else
    {
        @foreach (var url in Model.cssUrls)
        {
            <link rel="prefetch" href="@Html.StaticFile(url)"/>
        }
    }   
}

我该怎么做？我尝试了不同的变体 none，它们都奏效了！提前感谢您的帮助

Answer 1

您需要将此代码放入您的 razor 文件中，位于客户端的 javascript 标签内。

从服务器传入脚本的 url，或在 javascript 代码中对其进行硬编码。

<script>
    @if (!Model.OldLayout)
    {
        <text>
        if (preloadSupported())
        {
            loadScript("/scripts/script01.js");
            loadScript("/scripts/script02.js");

            function loadScript(url)
            {
                var script = document.createElement('script');
                document.head.appendChild(script);
                script.onload = function()
                {
                    // Do anything with the script here (because it's now loaded)
                };
                script.src = url;
            }
        }
        </text>
    }
</script>

Answer 2

混合服务器端和客户端代码可能很棘手。您可以将呈现的服务器端代码与 javascript 一起使用，但它不能真正以其他方式工作。

在您的第一个示例中，if-statement 必须是：

if (!('@Model.oldLayout' === 'True') && preloadSupported())
{
    //..link
}

这里的问题是 link 在页面被解析和呈现之前不会存在。您也许可以使用 document.write、createElement 或 jquery $.load() 来添加它，但这取决于外部文件的用途以及何时必须添加它。

最好的办法是更早地检查 "preloadSupport"，或者如果支持预加载则重定向访问者并创建新的响应。

将服务器端 razor 布尔值与客户端布尔值结合起来以包含 link

combine server side razor boolean with client side boolean to include a link

html

javascript

client-side

preload

razor