Question

我无法访问.cshtml文件中if语句的javascript变量

这就是我所拥有的：

<html>
    <head>
    </head>
    <body>
        <script>
        const preloadSupported = () => {
          const link = document.createElement('link');
          const relList = link.relList;
          if (!relList || !relList.supports)
            return false;
          return relList.supports('preload');
        };
        </script>
        @if (!Model.oldLayout && preloadSupported)
        {
            <link rel="preload" href="staticResource.js" as="script" />
        }
    </body>
</html>

问题是未定义preloadSupported并且页面无法加载。我很困惑，为什么这不起作用。任何帮助将不胜感激!!

Answer 1

您正在将服务器端剃刀代码与客户端javascript混合使用。

你的行

@if(!Model.oldLayout && preloadSupported)

正在检查服务器上的oldLayout和preloadSupported的结果。但preloadSupported函数位于客户端上，因此在服务器上未定义。

另外（当在客户端上时），检查值preloadSupported将返回函数的代码 - 不运行它并获得结果。您需要在preloadSupported()之后使用括号来执行该函数并返回结果。否则，如果该函数存在，它将始终作为 truthy 返回。

preload用于在页面加载过程的早期加载脚本。

来自MDN：

元素的rel属性的预加载值允许您在HTML中编写声明性提取请求，指定加载后您的网页很快就会需要的资源因此，希望在页面的生命周期的早期开始预加载在浏览器的主渲染机制开始之前加载。

您的选择

你可以：

在您到达此页面之前测试preloadSupported（）（不是那么好）并将其传回服务器以供用户的会话，cookie等供以后使用。

或者

您可以使用

在相关页面上的所有客户端执行此操作

if(@!Model.oldLayout.ToString().ToLower() && preloadSupported)
{
    ...
}

（在javascript <script>标记内。

这将输出（取决于oldLayout的值）

if(true && preloadSupported())
{
    ...
}

在客户端<script>标记。

最后，在里面放置一些动态javascript文件加载代码。

关于如何做到这一点，有很多答案。

访问正文中脚本之外的javascript var

1 个答案: