![](/img/trans.png)
[英]Facebook Javascript SDK, how to know when async script has been loaded?
[英]How to check if an Javascript script has been loaded Asynchronously (Async) or async attribute is present?
我想知道是否存在一种方便的方法来检查脚本(执行时)是否已异步加载。
例如脚本标签:
<script async type="text/javascript" src="js/async.js"></script>
脚本async.js:
if (_condition_to_check_if_this_has_been_loaded_async) { console.log("async: true") }
除非您希望IE
兼容,否则此问题的正确答案是使用鲜为人知但广泛支持的document.currentScript
属性。
此属性返回当前正在执行的脚本的HTMLScriptElement
(如果脚本不在标记中/是回调或类似名称, HTMLScriptElement
返回任何值),它告诉您它是否具有async
/ defer
属性。
MDN示例甚至引用了这个确切的用例:
if (document.currentScript.async) {
console.log("Executing asynchronously");
} else {
console.log("Executing synchronously");
}
您可以尝试测试是否已加载文档源:
if (document.readyState == "complete" || document.readyState == "loaded") {
// script was fired async
} else {
// script was sync
}
它可能会起作用,因为如果脚本被同步触发,则document.readyState
将不会在执行时complete
或loaded
但是,如果您的脚本很小,那么它可能在解析整个页面之前就已加载,因此它不是理想的解决方案,但我认为值得一提
jQuery的:
您可以使用jQuery
选择页面中的所有script
元素,然后检查其src
属性是否与您要查找的元素匹配。 下面的示例包含对脚本(已加载)和另一脚本(未加载)的检查,以显示两种情况下的检查结果:
var len = $('script').filter(function () { return ($(this).attr('src') == 'js/async.js'); }).length; if (len === 0) console.log('async not found'); else console.log('async found'); var len = $('script').filter(function () { return ($(this).attr('src') == 'js/foobar.js'); }).length; if (len === 0) console.log('foobar not found'); else console.log('foobar found');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script async type="text/javascript" src="js/async.js"></script>
纯Javascript:
另外,您可以使用纯Javascript,利用getElementsByTagName()
和getAttribute()
方法来实现同一目的。 下面的例子:
var scripts = document.getElementsByTagName('script'); var found = false; for(var i = 0; i<scripts.length; i++) if(scripts[i].getAttribute('src')=='js/async.js') found = true; if (found) console.log('async found'); else console.log('async not found'); var scripts2 = document.getElementsByTagName('script'); var found = false; for(var i = 0; i<scripts.length; i++) if(scripts2[i].getAttribute('src')=='js/foobar.js') found = true; if (found) console.log('foobar found'); else console.log('foobar not found');
<script async type="text/javascript" src="js/async.js"></script>
更新:如果要检查是否已加载js/async.js
脚本,并且还具有属性async
,则可以使用类似的技术。 下面的例子:
jQuery的:
var len = $('script').filter(function () { return ($(this).attr('src') == 'js/async.js' && $(this).attr('async')!== typeof undefined && $(this).attr('async') !== false); }).length; if (len === 0) console.log('async not found'); else console.log('async found');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script async type="text/javascript" src="js/async.js"></script>
纯Javascript:
var scripts = document.getElementsByTagName('script'); var found = false; for(var i = 0; i<scripts.length; i++) if( scripts[i].getAttribute('src')=='js/async.js' && scripts[i].getAttribute('async')!= typeof undefined) found = true; if (found) console.log('async found'); else console.log('async not found');
<script async type="text/javascript" src="js/async.js"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.