11

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

6 回答 6

14

将函数附加到加载事件：

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

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

于 2012-08-21T15:38:51.153 回答
5

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

这个网站有一个很好的例子来说明它是如何工作的。

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

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

来源：MDN

于 2012-08-21T15:40:30.357 回答
2

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

<script src="external_script.js"></script>
<script type="text/javascript">
    ExternalScriptHasLoaded();
</script>
于 2012-08-21T15:41:45.367 回答
2

感谢上述帮助，尤其是 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 中。如果不是，我会显示一条错误消息。

于 2012-08-21T18:14:28.340 回答
1

这对我有用：但是，它确实依赖于大多数现代浏览器支持的较新的 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);
}
于 2017-02-28T03:44:38.527 回答
0

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

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

那是你在寻找的东西，我不确定我是否完全理解？

于 2012-08-21T15:38:01.140 回答