Question

我正在尝试在body 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个函数？

Answer 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

Answer 2

只需从java脚本中执行此操作，共享到注释中的链接之一就可以解释为什么最好将此方法用于内联属性。

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

Answer 3

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

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

所以你有一个名为例如＆＃34; myjsfile.js＆＃34;的其他文件，然后你从你的HTML页面引用它

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

以下是放置此引用的位置的答案：Where to place Javascript in a HTML file?

你的＆＃34; myjsfile.js＆＃34;文件只会有：

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文件在您的代码前引用。

Answer 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>

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

4 个答案: