Question

我正在编写一个js脚本，人们将通过在HTML的正文部分或标题末尾添加一行代码来添加到他们的网站。

我的问题是如何在外部js文件上执行onload。下面的代码会起作用吗？在文件上载并错过onload事件后，它是否可能运行？

function c_onload () {  alert ('onload'); }

if (window.attachEvent) {window.attachEvent('onload', c_onload);}
else if (window.addEventListener) {window.addEventListener('load', c_onload, false);}
else {document.addEventListener('load', c_onload, false);}

（我不能使用Jquery或任何其他库）

Answer 1

你的上一个else - 条款是什么

else {document.addEventListener('load', c_onload, false);

有关？这是无用的，imho。

以下内容应为跨浏览器解决方案：首先检查addEventListener()，然后检查attachEvent()并返回onload = ...

function chain(f1, f2) {
    return typeof f1 !== 'function' ? f2 : function() {
        var r1 = f1.apply(this, arguments),
            r2 = f2.apply(this, arguments);
        return typeof r1 === 'undefined' ? r2 : (r1 && r2);
    };
}

function addOnloadListener(func) {
    if(window.addEventListener) 
        window.addEventListener('load', func, false);
    else if(window.attachEvent)
        window.attachEvent('onload', func);
    else window.onload = chain(window.onload, func);
}

此外，kgiannakakis所说的

原因是浏览器以不同方式处理onLoad事件。

不是这样：所有主流浏览器都以相同的方式处理window.onload，即在加载外部资源（包括外部脚本）之后执行侦听器功能。问题在于DOMContentLoaded - 这就是使用doScroll()，defer，onreadystatechange以及其他任何人烹饪的黑客所在的地方。

根据您的目标受众群体，您可能希望删除后备代码，甚至只能使用它。我的投票将放弃它。

Answer 2

我担心如果你不能使用jQuery或其他一些库，你需要重现一种很好的功能。原因是浏览器以不同的方式处理onLoad事件。

我建议你下载jQuery的代码，看看如何实现documentready函数。

Answer 3

onLoad事件应该在加载它所附加的元素时运行。但有些浏览器*将其误解为“beforeload”或“在加载过程中的某个时间”，因此确保在加载所有html后运行的最安全的选项是在HTML源代码的底部添加对函数的调用，如下所示：

    ...
        <script type="text/javascript">
            c_onload();
        </script>
    </body>
</html>

（*至少某些版本的Safari for Windows我确实存在这个问题）

来自外部js文件的onload

3 个答案: