检测外部脚本是否已加载答案

【问题标题】：Detect whether external script has loaded检测外部脚本是否已加载
【发布时间】：2012-08-21 15:35:25
【问题描述】：

使用 JavaScript，有没有办法检测外部脚本（来自第三方供应商）是否已完全加载？

有问题的脚本用于拉入和嵌入作业列表的标记，不幸的是，它没有使用任何变量或函数。它使用document.write 输出嵌入到我的页面中的所有内容。

理想情况下，我希望在等待外部脚本加载时显示某种加载消息，如果加载失败，则显示“抱歉，稍后再回来查看...”消息。

我在网站上使用 jQuery，但是在我调用 jQuery 之前调用了这个外部脚本。

这是来自外部脚本的 document.write 的样子：

document.write('<div class="jt_job_list">');
document.write("
    <div class=\"jt_job jt_row2\">
        <div class=\"jt_job_position\">
            <a href=\"http://example.com/job.html\">Position Title</a>
        </div>
        <div class=\"jt_job_location\">City, State</div>
        <div class=\"jt_job_company\">Job Company Name</div>
    </div>
");

【问题讨论】：

如何包含这个脚本？通过<head>中的<script>标签？
它通过<script> 标签包含在内，但不在头部。它显示在<body> 中（因为 CMS 用户嵌入了这些东西）。

标签： javascript jquery

【解决方案1】：

将函数附加到加载事件：

<script type="text/javascript" src="whatever.js" onload ="SomeFunction()" />

就您的loading... 问题而言，尝试显示一个用于加载的div，然后在您的onload 函数中使用display:none-ing 它。不过，请务必处理脚本也无法加载的情况。

【讨论】：

【解决方案2】：

脚本标签会阻止下载，因此只要依赖于您的脚本的内容低于您的脚本加载位置，您应该没问题。即使脚本在您的页面正文中也是如此。

This website 有一个很好的例子来说明这是如何工作的。

如果您异步加载脚本，这显然不起作用。

在浏览器继续解析页面之前，会立即获取并执行没有 async 或 defer 属性的脚本。

来源：MDN

【讨论】：

【解决方案3】：

您可以在页面上放置一个脚本块：

<script src="external_script.js"></script>
<script type="text/javascript">
    ExternalScriptHasLoaded();
</script>

【讨论】：

很棒，但是async = true时你有解决方案吗？

【解决方案4】：

感谢上述帮助，尤其是 ngmiceli 提供的 Steve Souders 链接！

我决定采用一种可能是“懒惰”的方法，同时也放弃了“正在加载”的消息：

$(document).ready(function(){
    if ($('.jt_job_list').length === 0){
        $('#job-board').html("<p>We're sorry, but the Job Board isn't currently available. Please try again in a few minutes.</p>");
    };
});

非常简单，但我正在查看是否有 .jt_job_list 类的元素在 dom 中。如果不是，我会显示一条错误消息。

【讨论】：

【解决方案5】：

这对我有用：但它确实依赖于大多数现代浏览器支持的较新的 querySelector 接口。但如果您使用的是真正旧的浏览器，则可以使用 getElement... 并运行 for 循环。

function loadJS(file, callback, error, type) {
    var _file = file ;
    var loaded = document.querySelector('script[src="'+file+'"]') ;

    if (loaded) {
      loaded.onload = callback ;
      loaded.onreadystatechange = callback;
      return
    }

    var script = document.createElement("script");

    script.type = (typeof type ==="string" ? type : "application/javascript") ;

    script.src = file;
    script.async = false ;
    script.defer = false ;
    script.onload = callback ;

    if (error) {
       script.onerror = error ;
       }
    else {
       script.onerror = function(e) {
              console.error("Script File '" + _file + "' not found :-(");
              };
       }

    script.onreadystatechange = callback;

    document.body.appendChild(script);
}

【讨论】：

【解决方案6】：

您可以提供任何您正在寻找的 ID

并使用document.getElementById("ID");检查ID是否已经加载

这就是你要找的东西，不确定我是否完全理解？

【讨论】：