在 body onload 中加载具有 2 个函数的 JavaScript。

14

我正在尝试在页面主体加载时载入两个 JavaScript 事件/函数,如下:

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

每当我使用两个函数进行加载时,第一个函数就会中止 - 但如果我只加载其中一个函数,它就可以正常工作 - 我做错了什么吗?在onload中放置两个函数是不可能的吗?


1
你真的应该避免使用内联处理程序。它们会使你的代码难以维护。不过,看起来你没有语法错误。 - Fabrizio Calderan
1
参见:为什么内联CSS和JavaScript代码是不好的。此外,直接访问document的表单属性是非标准的。应该将它们作为document.forms的属性进行访问,并将元素作为表单的elements属性的属性(例如,document.forms.form1.elements.HotelId),或者通过ID直接访问(例如,假设名为“HotelID”的输入也被赋予了相同的ID,则使用document.getElementById('HotelID'))。 - outis
不确定是否有任何区别,但这两个函数执行AJAX请求。 - Paul Clubs
@outis +1,内联JavaScript很糟糕。请参阅https://dev59.com/0G855IYBdhLWcg3wMRVW上的相关问题“什么是非侵入式JavaScript(Unobtrusive Javascript)的术语解释?” - Adriano
4个回答

21

试试这个:

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

多个onload事件

(该链接为英文内容)

8

最好使用JavaScript来完成这件事,其中一条评论分享的链接解释得很清楚,为什么使用这种方法比内联属性更好。

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

3

我会尽量避免使用内联JavaScript,这就是你在问题的代码中所做的:在HTML属性中添加JavaScript。


最佳实践是将您的javascript放在一个单独的文件中,参见相关问题什么是非侵入式Javascript?
因此,您需要另外一个文件,例如"myjsfile.js",然后从您的HTML页面引用它。
<script src="./path/to/your/myjsfile.js"></script>

这里是放置此引用的答案:在HTML文件中放置Javascript的位置? 你的“myjsfile.js”文件只需包含以下内容:
window.onload =  function(){
    getSubs(...);
    getTags(...);
};

避免的另一件事:在同一个HTML文件中添加javascript。原因也基于"不显眼的javascript"的同一原则。 Layman Terms下的什么是不显眼的Javascript? 但我猜你可能会有想要这样做的情况。
如果你真的必须这样做,使用window.onload代替内联javascript onload ="...",请看这里window.onload vs <body onload=""/> 只需将以下内容添加到您的HTML文件:
<script type="text/javascript">
    window.onload =  function(){
        getSubs(...);
        getTags(...);
    };
</script>

这里是放置代码的位置的答案: 在HTML文件中放置JavaScript的位置?

注意:是的,与放置对外部javascript文件的引用的地方相同。


另外一件事:我不知道您的getSubs()getTags()函数定义在哪里。但是,如果您希望您的代码能够正常工作,它需要在定义它们的文件(或javascript的一部分)加载后调用这些函数。
简而言之:确保引用包含getSubs()getTags()定义的javascript文件在您的代码之前被引用。

1

你可以创建一个新的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>

1
你在这里做的东西真的很丑陋。请参阅https://dev59.com/0G855IYBdhLWcg3wMRVW - Adriano
工作得很好,虽然 - Moritz

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接