故事的开始是这样的:项目中遇到一个跨域请求数据的问题,于是利用<script>动态加载数据(凡是拥有”src”这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>)。domain1下请求domain2下的资源:
动态加载js,是异步完成数据加载的,此时浏览器不会阻塞接下去的js执行。
遇到问题了:当浏览器没有加载完data,而接下来的代码访问了data,这时会报 data is undefined 错误。
这时我们需要先判断动态加载的js资源是否加载完全:
解决了?NO,不好意思,IE下完全没有动静。
怎么办?
在IE或一些基于IE内核的浏览器中(如Maxthon),它是通过script节点的readystatechange方法来判断的,而其它的一些浏览器中,往往是通过load事件来决定的,代码如下:
解决了。
<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');
}
解决了。