Question

以下是正在发生的事情的基本示例。我可以理解，我可能在定义之前调用了函数，但是为什么将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>

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

我决定只删除@section bottomjavascript，因此它不会在body标签下方移动任何脚本..不是真正的解决方案，因为此页面不再使用javascript的主节，但现在可以正常工作

Answer 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文件，您就可以运行该函数了。为此，您必须将razor中的if语句放入js。

Answer 2

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

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

这个脚本最终的位置无关紧要：顶部，底部，......无所谓。

Answer 3

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

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

Answer 4

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

为什么？

使用样式表，可以阻止渐进式渲染，直到下载完所有样式表。这就是为什么最好将样式表移动到文档HEAD，因此它们首先被下载并且渲染不被阻止。使用脚本，对脚本下面的所有内容阻止渐进式呈现。

使用此：

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

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

为什么我可以在像onblur这样的事件中调用javascript函数，但是当我调用它底部的函数变为'undefined'时？

4 个答案:

为什么？