为什么我可以从onblr这样的事件内部调用javascript函数，但当我调用<身体>它变成'未定义

Why can I call a javascript function from inside an event like onblur, but when I call the function at the bottom of <body> it becomes 'undefined'?

本文关键字：调用 lt 身体 gt 未定义 onblr 我可以 事件 为什么 函数 javascript      更新时间：2023-09-26

下面是正在发生的事情的一个基本示例。我可以理解，我可能在定义函数之前就在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，而不能在页面上调用它呢？

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

将函数定义放在第一次调用之前。当你第一次调用它时，解析器不知道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语句放入js中。

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

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

这个脚本最终在哪里并不重要：顶部、底部。。。无关紧要。

建议在</body>标记之前添加Javascript，以防止脚本加载时出现渲染阻塞，这对站点感知头来说要好得多。在</body标记之前添加Javascript也将提高站点加载速度。

你可以在这个主题上找到更多关于这方面的信息：JavaScript在<头部>或者刚好在<身体>？

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

为什么

使用样式表时，渐进渲染会被阻止，直到所有样式表都被下载。这就是为什么最好将样式表移动到文档HEAD中，这样它们就可以先下载，并且不会阻止渲染。使用脚本时，会阻止对脚本下方的所有内容进行渐进式渲染。

使用此：

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

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

相关文章：