2 window.onload 在 2 个单独的 .js 文件中，仅加载 1 个函数答案

【问题标题】：2 window.onload in 2 separate .js files, only 1 function loads2 window.onload 在 2 个单独的 .js 文件中，仅加载 1 个函数
【发布时间】：2014-07-20 02:41:23
【问题描述】：

我有 2 个外部 JavaScript 文件，它们都通过 window.onload 调用函数。文件冲突，所以只有第二个 js 文件在工作。

我将如何修复 window.onload 以使这两个功能都能正常工作？我应该在 HTML 文件中执行此操作，还是可以在其中一个 js 文件中修复它？

HTML 标头是：

<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文件中：

slideshow.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 
}

【问题讨论】：

标签： javascript conflicting-libraries

【解决方案1】：

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

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

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

【讨论】：

如果你要合并这两个 javascript 文件，你会怎么做呢？我在 1 个文件上有一个 onload，但在另一个文件中没有。（我想捆绑我所有的 javascript 文件）
@ganders：如果一个文件包含在 onload 中而另一个没有，那么您可以连接两个文件。

【解决方案2】：

如果您被允许/熟悉使用 JQuery，它会像这样完成：

$(window).on('load', function() {
    //<-- do the rest here..
});

如果你还在寻找纯js，试试这个例子，它不在window.onload，而是使用document.readyState：

first.js

(function(window, document) {
    var t = setInterval(function() {
        if('complete' === document.readyState) {
            clearInterval(t);
            alert('first js loaded ...');
        }
    }, 10);
})(window, document);

last.js

(function(window, document) {
    var t = setInterval(function() {
        if('complete' === document.readyState) {
            clearInterval(t);
            alert('last js loaded ...');
        }
    }, 10);
})(window, document);

Find the git repo here

【讨论】：