Question

我正在编写一个脚本，该脚本将作为插件在多个网站上使用。我只能使用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>

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

Answer 1

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

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

Answer 2

加载脚本的最佳方法是什么，而不会给其他脚本或框架带来任何麻烦

您需要考虑的事情是，是吗......

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

第二点易于解决，.addEventListener支持为同一事件添加许多不会互相覆盖的侦听器。您可能感兴趣的有两个不同的事件，'load'上的window和document上的'DOMContentLoaded'。您始终可以在<script>的最后添加<body>，但我个人不喜欢这样做，因为您将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);
});

Javascript - 使用onload事件与否

2 个答案: