0

这是正在发生的事情的一个基本示例。我可以理解，我可能会在定义之前在 body 中调用该函数，但是为什么将 javascript 放在页面底部如此普遍？我知道我的老板会说使用底部 javascript 那我该怎么办？

此外，根本问题是页面首次加载时，如果有来自服务器的用户名，我需要运行 CheckUsername() 函数。那么有没有更好的方法来有条件地做到这一点？

<body>
    <input type="text" name="username" 
        id="username" onblur="CheckUsername()" 
        maxlength="30" value="@username"  />

    @if (username.length > 5) 
    {
         <script>
            CheckUsername(); // this is the one that's undefined
         </script>
    }  

    @section bottomjavascript
    {
        <script language="JavaScript">

            function CheckUsername() {
                // does work
            }

        </script>
    }


</body>

实际的正文标签来自主布局。但是为什么我可以在输入标签中使用CheckUsername，却不能只在页面上调用呢？

我决定只删除@section底部javascript，这样它就不会在body标签下方移动任何脚本。这不是一个真正的解决方案，因为这个页面不再使用javascript的主部分，但它现在可以工作了

4

4 回答 4

1

在页面加载时执行检查，如下所示：

@if (username.length > 5) 
{
     <script>
        window.addEventListener("load", function() {
            CheckUsername();
        });
     </script>
}

这个脚本在哪里结束并不重要：顶部，底部，......无关紧要。

于 2015-12-02T18:28:13.920 回答
1

将函数定义放在第一次调用之前。当您第一次调用它时，解析器不知道 CheckUsername() 是什么。所以这样做：

<body>
    <input type="text" name="username" id="username" onblur="CheckUsername()" maxlength="30" value="@username"  />

@section bottomjavascript
{
    <script language="JavaScript">

        function CheckUsername() {
            // does work
        }

    </script>
}
     <script>
$(document).ready(function() {
    if (@{username.length} > 5) 
    {
        CheckUsername(); // this is the one that's undefined
    }  
});
     </script>

</body>

我通常将这些函数放在自己的 js 文件中，并在文档的开头引用它们。这样，当我在下面需要它时就定义了它。

如果你把代码放在document.ready中，那么所有的js文件都应该被加载，你就可以运行这个函数了。为此，您必须将您的 if 语句从 razor 放入 js。

于 2015-12-02T18:13:09.130 回答
0

建议在标签之前添加 Javascript</body>以防止在脚本加载时渲染阻塞，并且对于站点感知头更好。在标签前添加 Javascript</body也会提高网站加载速度。

您可以在此主题中找到更多相关信息：JavaScript in <head> or just before </body>?

于 2015-12-02T18:23:27.533 回答
0

要回答一个问题，脚本标签应该放在 </body>文档末尾之前。

为什么？

使用样式表，在下载所有样式表之前会阻止渐进式呈现。这就是为什么最好将样式表移动到文档 HEAD，以便它们首先被下载并且渲染不会被阻止。使用脚本时，会阻止脚本下方的所有内容的渐进式渲染。

用这个：

<script>
    window.addEventListener("DOMContentLoaded", function (event){
    //do stuff
    });
</script>

这会在触发您的功能之前检查页面是否已完全加载。库，例如 jQuery $(document).ready会自动为您执行此操作。

于 2015-12-02T20:33:44.870 回答