简体   繁体   English

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

[英]Loading javascript in body onload with 2 functions

I am trying to load 2 javascript events/functions in the body onload as follows :- 我试图在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);">

Whenever I load using 2 functions the first one aborts - but if I just load the one it works fine - am I doing something wrong is it no possible to put 2 functions within the onload? 每当我使用2个函数加载时,第一个函数就会中止 - 但是如果我只加载它就可以正常工作 - 我做错了是不可能在onload中放入2个函数?

try this: 试试这个:

<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 多次上传

Just do it from java script instead, one of the link shared into a comment explains well why it is best to use this approach over inline attributes. 只需从java脚本中执行此操作,共享到注释中的链接之一就可以解释为什么最好使用此方法而不是内联属性。

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

I would avoid at all cost to have inline javascript , that is what you did in the code of your question: add javascript within an HTML attribute. 我会不惜一切代价避免使用inline javascript ,这就是你在问题代码中所做的:在HTML属性中添加javascript。


Best practice is to add your javascript in a separate file, see the related question on this principle What is Unobtrusive Javascript in layman terms? 最佳做法是将您的javascript添加到单独的文件中,请参阅有关此原则的相关问题什么是外行术语中不显眼的Javascript?

So you'd have an other file called for instance "myjsfile.js", then you reference it from your HTML page 所以你有一个名为“myjsfile.js”的其他文件,然后你从HTML页面引用它

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

Here is the answer to where to place this reference: Where to place Javascript in a HTML file? 以下是放置此引用的位置的答案: 将Javascript放在HTML文件中的哪个位置?

Your "myjsfile.js" file would simply have: 您的“myjsfile.js”文件只包含:

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

Another thing to avoid: add javascript within the same HTML file. 另一件要避免的事情是:在同一个HTML文件中添加javascript。 The reason is also based on the same principle of unobstrusive javascript . 原因还在于基于相同的不unobstrusive javascript原则。 What is Unobtrusive Javascript in layman terms? 什么是外行术语中的Unobtrusive Javascript?

But I guess there are corner cases where you may want to do that. 但我想有一些角落的情况你可能想要这样做。

If you really have to, do use window.onload instead of the inline javascript onload="..." , see why here window.onload vs <body onload=""/> 如果你真的需要,请使用window.onload而不是内联javascript onload="..." ,请参阅window.onload vs <body onload =“”/>

Just add the following to your HTML file: 只需将以下内容添加到HTML文件中:

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

Here is the answer to where to place this code: Where to place Javascript in a HTML file? 以下是放置此代码的位置的答案: 将Javascript放在HTML文件中的哪个位置?

Note: Yes, in the same place as where you would put the reference to an external javascript file 注意:是的,与您将引用放在外部javascript文件的位置相同


Another thing: I do not know where your getSubs() and getTags() functions are defined. 另一件事:我不知道你的getSubs()getTags()函数在哪里被定义。 But if you want your code to work, it needs to call these functions after the file (or part of javascript) that defines them has been loaded. 但是如果你想让你的代码工作,它需要在加载了定义它们的文件(或javascript的一部分)之后调用这些函数。

In short: make sure the javascript file containing the definitions of getSubs() and getTags() is referenced before your code. 简而言之:确保在代码之前引用包含getSubs()getTags()定义的javascript文件。

One thing that you could do is create a new JS function that accepts the document.form1.HotelID.options[document.form1.HotelID.selectedIndex].value parameter and call the two functions in the newly created function. 您可以做的一件事是创建一个新的JS函数,它接受document.form1.HotelID.options [document.form1.HotelID.selectedIndex] .value参数并在新创建的函数中调用这两个函数。

I tried calling two functions using the below code and it worked fine for me. 我尝试使用下面的代码调用两个函数,它对我来说很好。

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM