关于 JavaScript 的加载执行顺序
本文介绍了关于 JavaScript 的加载执行顺序的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
在页上有两个script标签,第一个script标签内动态创建了一个script,去加载一个config.js文件,第二个script标签内,需要用到动态加载的config。如下:
config.js
window.config={
appName:'name',
appId:'appId'
}
index.html
//第一个script
<script type="text/javascript">
(function () {
var script=document.createElement('script');
//设置为同步加载
script.async=false;
script.src='config.js';
document.head.appendChild(script);
//此时head内有了这个script标签,
//它会去加载config.js
//因为设置的是同步;async=false;
//此时程序应该停在此处,等待config.js的加载执行
})();
</script>
//第二个script
<script>
(function () {
var config=window.config;
//js的加载执行是同步的,
//按理说,程序执到这里时,动态加载的config.js文件已经加载执行完毕
//window.config应该是有数据的
//但实际上此时config为undefined
//也就是说动态加载的js文件,并没有阻塞其后的代码执行
//这是为什么??
console.log(config);//undefined
})();
</script>
为什么在第二个script标签内读取window.config时,却是undefined??
解决方案
啊,那纯粹是因为下载的异步性
如果用 script.text 就没这问题了
至于为什么 document.write 可以,那是因为浏览器会选择下载完再继续解析 HTML
这篇关于关于 JavaScript 的加载执行顺序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文