Question

我正在编写一个js脚本，人们只需在HTML的页头或页面底部添加一行代码即可将其添加到他们的网站中。

我的问题是如何在外部JS文件上正确执行onload。下面的代码可以工作吗？它不可能在文档的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

我担心如果你不能使用jQuery或其他库，你需要复制他们很多的功能。原因是各个浏览器处理onLoad事件的方式不同。

我建议您下载jQuery的代码并查看documentready函数的实现方式。

Answer 2

你的最后一个 else 子句是什么？

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

为什么？在我看来，它是相当无用的。

以下应该是适用于跨浏览器的解决方案：它首先检查 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 3

onLoad事件应该在附加的元素加载时运行。但某些浏览器将其误解为“加载之前”或“在加载期间的某个时间”，因此最安全的选项是在HTML源代码底部添加对函数的调用，以确保在所有HTML加载后运行。

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

至少在某些Safari适用于Windows系统的版本中，我确信存在这个问题。

友情链接