Question

使用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>
");

Answer 1

将一个函数附加到加载事件：

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

就loading...问题而言，请尝试显示加载div，然后display:none将其添加到onload函数中。但是，请确保处理脚本无法加载的情况。

Answer 2

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

This website就是如何运作的一个很好的例子。

如果你以异步方式加载脚本，这显然不起作用。

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

来源：MDN

Answer 3

感谢上面的帮助，特别是对于Steve Souders链接的ngmiceli！

我决定采取什么可能是“懒惰”的做法，并放弃“加载”消息：

$(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中。如果不是，我会显示错误消息。

Answer 4

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

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

Answer 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);
}

Answer 6

你可以给你想要的ID

并使用document.getElementById("ID");

检查是否已加载ID

这是你在寻找不确定我完全理解的东西吗？

检测外部脚本是否已加载

6 个答案: