使用 2 个函数在 body onload 中加载 javascript答案

【问题标题】：Loading javascript in body onload with 2 functions使用 2 个函数在 body onload 中加载 javascript
【发布时间】：2012-04-24 17:43:58
【问题描述】：

我正在尝试在正文 onload 中加载 2 个 javascript 事件/函数，如下所示：-

<body onLoad="getSubs(document.form1.HotelID.options[document.form1.HotelID.selectedIndex].value);getTags(document.form1.HotelID.options[document.form1.HotelID.selectedIndex].value);">

每当我使用 2 个函数加载时，第一个函数会中止 - 但如果我只加载一个它工作正常 - 我做错了什么，是不是不可能在 onload 中放置 2 个函数？

【问题讨论】：

你真的应该避免使用内联处理程序。它们使您的代码难以维护。无论如何，显然你没有语法错误
另见：Why Inline CSS And JavaScript Code Is Such A Bad Thing。此外，直接作为document 的属性访问表单是非标准的。将它们作为document.forms 的属性访问，将元素作为表单elements 属性的属性（例如document.forms.form1.elements.HotelId）或直接通过ID（例如document.getElementById('HotelID')，假设名为“HotelID”的输入也被赋予相同的ID）访问.
不确定这是否有任何区别，但这两个函数执行 AJAX 请求。
@outis +1，内联 javascript 很烂。另请参阅stackoverflow.com/questions/4478795/…上的相关问题What is Unobtrusive Javascript in layman terms?

标签： javascript html events client-server

【解决方案1】：

试试这个：

<html>
<head>
<script language="javascript">
function func1(){
    //the code for your first onload here
    alert("func1");
}
function func2(){
    //the code for your second onload here
    alert("func2");
}
function func3(){
    //the code for your third onload here
    alert("func3");
}
function start(){
    func1();
    func2();
    func3();
}
</script>
</head>
<body onload="start()">
</body>
</html>

Multiple onload

【讨论】：

【解决方案2】：

只需从 java 脚本执行此操作，共享到评论中的链接之一很好地解释了为什么最好使用这种方法而不是内联属性。

<head>
<script>
document.body.onload = function() {
getSubs(...);
getTags(...);
};
</script>
</head>
<body>
...
</body>

【讨论】：

【解决方案3】：

我会不惜一切代价避免拥有inline javascript，这就是您在问题代码中所做的：在 HTML 属性中添加 javascript。

最佳做法是将您的javascript添加到单独的文件中，有关此原理的相关问题请参见What is Unobtrusive Javascript in layman terms?

所以你会有一个名为“myjsfile.js”的其他文件，然后你从你的 HTML 页面引用它

<script src="./path/to/your/myjsfile.js"></script>

这是放置此参考的答案：Where to place Javascript in a HTML file?

您的“myjsfile.js”文件只需：

window.onload =  function(){
    getSubs(...);
    getTags(...);
};

另一件要避免的事情：在同一个 HTML 文件中添加 javascript。原因也是基于unobstrusive javascript的相同原理。 What is Unobtrusive Javascript in layman terms?

但我想在某些极端情况下您可能想要这样做。

如果你真的需要，请使用window.onload 而不是内联javascript onload="..."，看看为什么在这里window.onload vs <body onload=""/>

只需将以下内容添加到您的 HTML 文件中：

<script type="text/javascript">
    window.onload =  function(){
        getSubs(...);
        getTags(...);
    };
</script>

这里是放置此代码的答案：Where to place Javascript in a HTML file?

注意：是的，与您将引用放置到外部 javascript 文件的位置相同

另一件事：我不知道你的getSubs() 和getTags() 函数是在哪里定义的。但是如果你想让你的代码工作，它需要在定义它们的文件（或 javascript 的一部分）被加载之后调用这些函数。

简而言之：确保包含 getSubs() 和 getTags() 定义的 javascript 文件在您的代码之前被引用。

【讨论】：

【解决方案4】：

您可以做的一件事是创建一个新的 JS 函数，该函数接受 document.form1.HotelID.options[document.form1.HotelID.selectedIndex].value 参数并在新创建的函数中调用这两个函数。

我尝试使用以下代码调用两个函数，对我来说效果很好。

<html>
    <body onload="callStart();callAgain();">
        <script type="text/javascript">
            function callStart() {
                alert('First');
            }
            function callAgain() {
                alert('Again');
            }
        </script>
    </body>
</html>

【讨论】：

你在这里做的真是丑陋的东西。见stackoverflow.com/questions/4478795/…