从外部js文件加载

Question

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

我的问题是如何在外部 js 文件上执行 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);

用的？ 这是相当无用的，恕我直言。

以下应该是一个跨浏览器解决方案：它首先检查 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 事件应该在加载其附加的元素时运行。 但有些浏览器* 将此错误解释为“加载前”或“加载期间的某个时间”，因此确保加载所有 html 后运行某些内容的最安全选择是在 HTML 源代码的底部添加对该函数的调用，如下所示:

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

(*至少某些版本的 Windows 版 Safari 确实存在此问题)