javascript 检测外部脚本是否已加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12058392/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Detect whether external script has loaded
提问by ctrlaltdel
Using JavaScript, is there a way to detect whether or not an external script (from a third-party vendor) has completely loaded?
使用 JavaScript，有没有办法检测外部脚本（来自第三方供应商）是否已完全加载？
The script in question is used to pull in and embed the markup for a list of jobs and, unfortunately, doesn't make use of any variables or functions. It uses document.writeto output all of the content that gets embedded in my page.
有问题的脚本用于引入和嵌入作业列表的标记，不幸的是，它没有使用任何变量或函数。它用于document.write输出嵌入到我的页面中的所有内容。
Ideally, I'd like to display some kind of loading message while I'm waiting for the external script to load, and if it fails to load, display a "We're sorry, check back later..." message.
理想情况下，我希望在等待外部脚本加载时显示某种加载消息，如果加载失败，则显示“我们很抱歉，稍后再回来查看...”消息。
I'm using jQuery on the site, but this external script is called before I make the jQuery call.
我在网站上使用 jQuery，但是在我调用 jQuery 之前调用了这个外部脚本。
Here's what the document.writestuff from the external script looks like:
以下是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>
");
采纳答案by ctrlaltdel
Thanks for the assistance above, especially ngmiceli for the Steve Souders link!
感谢上面的帮助，尤其是 ngmiceli 的 Steve Souders 链接！
I decided to take what's probably a "lazy" approach, and also forego the "loading" message:
我决定采取可能是“懒惰”的方法，并放弃“加载”消息：
$(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>");
};
});
Pretty simple, but I'm looking to see if an element with the .jt_job_listclass is in the dom. If it isn't, I display an error message.
很简单，但我想看看.jt_job_list该类的元素是否在 dom 中。如果不是，我会显示一条错误消息。
回答by Phillip Schmidt
Attach an function to the load event:
将函数附加到 load 事件：
<script type="text/javascript" src="whatever.js" onload ="SomeFunction()" />
As far as your loading...problem goes, try displaying a div for loading and then just display:none-ing it in your onloadfunction. Make sure to handle cases where your script fails to load too, though.
就您的loading...问题而言，尝试显示一个用于加载的 div，然后display:none在您的onload函数中将其 -ing 。不过，请确保处理脚本无法加载的情况。
回答by Nick
Script tags block downloads, so as long as the content dependent on your script is below where your script it loaded, you should be fine. This is true even if the script is in-line in the body of your page.
脚本标签会阻止下载，因此只要依赖于您的脚本的内容低于它加载的脚本的位置，您应该没问题。即使脚本内嵌在页面正文中也是如此。
This websitehas a great example of how this works.
这个网站有一个很好的例子来说明它是如何工作的。
This obviously does not work if you're loading the scripts asynchronously.
如果您异步加载脚本，这显然不起作用。
Scripts without async or defer attributes are fetched and executed immediately, before the browser continues to parse the page.
没有 async 或 defer 属性的脚本会在浏览器继续解析页面之前立即获取并执行。
Source: MDN
来源：MDN
回答by Shmiddty
You could put a script block after it on the page:
您可以在页面上放置一个脚本块：
<script src="external_script.js"></script>
<script type="text/javascript">
ExternalScriptHasLoaded();
</script>
回答by Anthony
This worked for me: it does however, rely on the newer querySelector interface which most modern browsers support. But if you're using reallyold browsers, you can use getElement... and run a for loop.
这对我有用：但是，它依赖于大多数现代浏览器支持的较新的 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);
}
回答by LmC
You could give what ever your looking for an ID
你可以提供任何你想要的 ID
and check whether not the ID has been loaded using document.getElementById("ID");
并检查是否使用 document.getElementById("ID");
Is that what your looking for not sure I fully understand?
这就是你要找的东西，不确定我完全理解吗？
