javascript - 2 个 window.onload 位于 2 个单独的 .js 文件中，仅加载 1 个函数

Question

我有 2 个外部 JavaScript 文件，它们都通过 window.onload 调用函数。文件冲突，因此只有第二个 js 文件有效。

如何修复 window.onload 以便这两个函数都可以工作？我应该在 HTML 文件中执行此操作还是可以在其中一个 js 文件中修复它？

HTML header 是:

<link type="text/css" rel="stylesheet" href="house.css" />
<style type="text/css"></style>
<script type="text/javascript" src="slideshow_library.js"></script>
<script type="text/javascript" src="slideshow.js"></script>
<script type="text/javascript" src="house.js"></script>

house.js:

    var $ = function(id){
    return document.getElementById(id);
}

var calculateClick = function() {
    console.log("click, calculate click is running");
    //blahblahblah, lots of code
}

window.onload = function(rental){
    console.log("onload, javascript is running");
    console.log(rental);

    $("calculate").onclick = calculateClick;
}

第二个 window.onload 位于 2 个 js 文件中:

幻灯片.js:

var slideShow;

window.onload = function (slideShow) {
    var params = {
        //blahblahblah lots of code
    }
}

slideshow_library.js:

var $ = function(id) { 
    return document.getElementById(id); 
}

var SlideShow = function( params ){
    //blahblah blah even more code
} 
SlideShow.prototype.displayImage = function(){
    //blahblah blah even more code
}
SlideShow.prototype.displayNextImage = function(){
    //blahblah blah even more code
}
SlideShow.prototype.displayPreviousImage = function(){
    //blahblah blah even more code
}
SlideShow.prototype.togglePlay = function(){
    //blahblah blah even more code 
}

Answer 1

不要使用旧的window.onload事件模型。正如您所注意到的，这不是很灵活，并且不再需要浏览器支持。

jQuery 让这变得简单；将每个 JS 文件中的 window.onload = function 更改为 $(function)。

纯 JS 解决方案:将其更改为 window.addEventListener('load', function)。