动态加载js如何判断加载完成

故事的开始是这样的:项目中遇到一个跨域请求数据的问题,于是利用<script>动态加载数据(凡是拥有”src”这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>)。domain1下请求domain2下的资源:
<script type="text/javascript" src="domain2.js">var data = [{'id':111,'s':'yes'},{'id':222,'s':'no'}]</script>


动态加载js,是异步完成数据加载的,此时浏览器不会阻塞接下去的js执行。
遇到问题了:当浏览器没有加载完data,而接下来的代码访问了data,这时会报 data is undefined 错误。

这时我们需要先判断动态加载的js资源是否加载完全:

var oScript = document.createElement('script'),
oHead = document.getElementsByTagName("HEAD").item(0);
oScript.setAttribute('type','text/javascript');
oScript.setAttribute('src','domain2.js');
oHead.appendChild(oScript);
oScript.onload = function(){
alert(data);
}

解决了?NO,不好意思,IE下完全没有动静。
怎么办?

在IE或一些基于IE内核的浏览器中(如Maxthon),它是通过script节点的readystatechange方法来判断的,而其它的一些浏览器中,往往是通过load事件来决定的,代码如下:

var oScript = document.createElement('script'),
oHead = document.getElementsByTagName("HEAD").item(0);
oScript.setAttribute('type','text/javascript');
oScript.setAttribute('src','domain2.js');
oHead.appendChild(oScript);
oScript.onload=oScript.onreadystatechange=function(){
alert('done');
}


解决了。
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值