Javascript - 是否使用 onload 事件答案

【问题标题】：Javascript - Use onload event , or notJavascript - 是否使用 onload 事件
【发布时间】：2012-12-20 16:21:39
【问题描述】：

我正在编写一个脚本，该脚本将作为插件在多个网站上使用。我必须只使用 Javascript，没有框架。我在问自己，什么是加载我的脚本而不会对可以在这些网站上加载的其他脚本或框架造成任何问题的最佳方式。我想做一个全局函数来调用我想要使用的函数，然后我把这个函数放在 window.load 事件上，像这样：

<script>
    var global = function(){
    object.domain.function1();
    object.domain.function2(param1, param2);
    object.domain.function3(1);
}
(function(){
    if(document.addEventListener){
        document.addEventListener('load',global, false);
    }
    if(document.attachEvent){
        document.attachEvent('onload',global);
    }
})();
</script>

或者简单地说：

<script>
    object.domain.function1();
    object.domain.function2(param1, param2);
    object.domain.function3(1);
</script>

当然，我需要在我的页面上加载一些元素。提前致谢。

【问题讨论】：

第二。您认为哪些问题需要通过更复杂的方法来解决？
在收听'load' 时，您应该在window 上使用.addEventListener 而不是document。
您可能感兴趣的另一个事件称为DOMContentLoaded，其目标为document

标签： javascript onload

【解决方案1】：

如果您可以将 javascript 放入 <body> 标记中，那么在整个页面加载后运行 javascript 的一种相当可靠的方法是将您的 javascript 放入页面底部的 <script> 标记中。

这不是我处理此问题的首选方式，但如果使用 onload 事件对您来说不太合适，这将是一个很好的下一步。

【讨论】：

我忘了告诉它，但脚本可以在页面中的任何位置，建议像所有 javascript 文件一样将其放在底部（可能除了 google 分析），但可能有些人会放它在的顶部。所以需要一个 onload 事件或一个 domready 事件，我在问什么是最好的方法来做到这一点而不与其他脚本冲突。
我不太确定您的脚本如何与其他任何内容发生冲突。如果它以任何方式发生冲突，在我看来，在使用onload 或domready 时它仍然会发生冲突。我应该澄清一下，我将冲突视为“干扰其他现有 javascript 或导致错误”。

【解决方案2】：

在不给其他脚本或框架造成任何问题的情况下加载我的脚本的最佳方式是什么

你需要考虑的事情是，你是……

污染命名空间
阻碍另一个脚本

第二点很容易解决，.addEventListener 支持为同一事件添加多个不会相互覆盖的侦听器。您可能对两个不同的事件感兴趣，'load' on window 和 'DOMContentLoaded' on document。您总是可以在<body> 的最后加上<script>，但我个人不喜欢这样做，因为您将 HTML 与 JavaScript 混合或更改 DOM 树。

对于第一点，这可以通过使用匿名函数来完成，如果您需要占用命名空间，请将所有变量和方法保存在一个对象中以最大程度地减少影响。

将所有这些放在一起，您最终可能会得到这样的结果

var myObjectName = { // everything in one object in global namespace
    domain: {
        function1: function () { /*...*/ },
        function2: function () { /*...*/ },
        function3: function () { /*...*/ }
    }
};

(function (fn) {
    if (window.addEventListener) {
        window.addEventListener('load', fn, false);
    }
    else if (window.attachEvent) { // Consider if support for `.attachEvent` is really necessary, people need to move on.
        window.attachEvent('onload', fn);
    }
})(function () { // pass your function anonymously
    myObjectName.domain.function1();
    myObjectName.domain.function2(param1, param2);
    myObjectName.domain.function3(1);
});

【讨论】：