javascript - 表示我的 JS 脚本已加载的最佳方式

Question

我有一个 JS 脚本将托管在我的服务器上，其他人将嵌入到他们的 html 中，即

...<code for http://yoursite.example.com />
<script type="text/javascript" src="http://mysite.example.com/awesome.js" />
...<code for http://yoursite.example.com />

我的脚本声明了一个对象，该对象具有一组可访问的属性，可用作 Javascript Object()，即

<script type="text/javascript">
//From http://mysite.example.com/awesome.js
alert(Awesome.Name);
</script>

由于加载时间差异，我似乎需要发出信号，表明我的脚本中的“Awesome”对象已准备就绪。我需要它独立存在，因此不依赖于特定的 JS 框架。

我是否需要发布自己的自定义 JS 事件，或者我的脚本已加载这一简单事实是否会被现有页面级事件之一捕获？我还应该怎么做？

更新:作为引用，如果我将 JS 包含在从 http://mysite.example.com 运行的 HTML 页面中，则 Awesome 对象可用并已填充。当从另一个域包含 JS 文件时，该对象在运行时未定义。

Answer 1

<script>的javascript内容标签是按程序执行的，所以这个

<script type="text/javascript" src="http://mysite.com/awesome.js" />
<script type="text/javascript">
    alert(Awesome.Name);
</script>

只会提醒Awesome.Name的内容如果在任何 previous 脚本标记中找到。

要了解页面上的所有内容是否已完全加载，您必须使用 DOMContentLoaded(适用于 Firefox)和“onreadystatechange”(适用于 ie)。如果您不关心检查 DOM(可能更容易)，您也可以简单地检查 window 对象上的 load 事件。

if ( document.addEventListener ) {
    document.addEventListener( "DOMContentLoaded", function(){
         doSomething();   
    }, false );
} else if ( document.attachEvent ) { // IE        
    document.attachEvent("onreadystatechange", function(){
        if ( document.readyState === "complete" ) {
            doSomething();
        }
    });
}