html正文中的Javascript函数，不起作用答案

【问题标题】：Javascript function in html body, wont workhtml正文中的Javascript函数，不起作用
【发布时间】：2013-02-21 00:48:54
【问题描述】：

在我的文档中，我有一个 onLoad 函数，如下例所示：

<body onLoad="display()">

此外，我在文档末尾添加了一个函数，它改变了一些 CSS 属性：

<script>
window.onload = foo(), bar();
</script>

不知何故，整个事情都不起作用！我试图在文档末尾添加所有功能，但我不明白，不知何故它们没有触发！

【问题讨论】：

window.onload = foo(), bar(); 调用函数foo 和bar 并将bar 的返回值分配给window.onload。我建议学习如何调试 JavaScript 代码：netmagazine.com/tutorials/javascript-debugging-beginners.
您是否查看了开发人员工具/javascript 控制台以查看您遇到了什么错误？

【解决方案1】：

这将调用函数，但它不会为 window.onload 分配任何有用的东西，除非你的最后一个函数恰好返回一个函数。

您需要为window.onload 分配一个函数，该函数将在window 准备就绪时调用您的函数。

window.onload = function() {
    foo();
    bar();
};

另外，由于您将脚本放在底部，您可能不需要window.onload。

    <script>
        foo(); bar();
    </script>
</body>

您还应该知道，直接分配给window.onload 将覆盖分配给<body onLoad=...> 的脚本，因此您不应该两者都做。目前，bar(); 的返回值正在清除调用display(); 的函数。

摆脱window.onload 分配将解决这个问题。

【讨论】：

我认为您指出了一个重要问题，但没有足够关注它。事实上window.onload 覆盖<body onload="">，并且分配给window.onload 的值可能是undefined（调用bar 的返回值。另外，根据它们的实际意思，OP 说脚本在<body>的底部是：“另外我在文档末尾添加了一个函数”
@Ian：是的，我认为你是对的。再次查看问题，新脚本似乎在底部，因此可能是覆盖。
但同时，由于调用了foo 和bar，并且文档准备好了（因为脚本在底部），不会你认为代码会起作用吗？我的意思是，onLoad="display()" 不会，因为它被覆盖了，但我认为无论foo 和bar 做什么，这些都会起作用。但显然，display() 永远不会运行。 OP没有明确“不起作用”是什么意思......
@Ian：是的，foo 和 bar 应该可以工作，除非它们依赖于完全加载的资源。这个问题当然可以澄清一些。
@thesystem：我是个乐观主义者：D

【解决方案2】：

在第一种情况下，我看不出它不应该工作的原因，只要 display() 被定义为没有错误的函数。

在第二种情况下，当通过 DOM 分配事件处理程序时，您需要传递函数引用（即，而不是 foo() 只是 foo）或将其包装在匿名函数中，如下所示：

window.onload = function() {
  foo();
}

【讨论】：