解决JS的跨域问题–动态Script标签(Dynamic Script Tag)  

这种方法也叫"动态脚本注入".这种技术克服了XMLHttpRequest的最大限制,也就是跨域请求数据.直接用JavaScript创建一个新的脚本标签,然后设置它的src属性为不同域的URL.
例如www.a.com/a.html中的script

var x = document.createElement('script');
x.src = 'http://www.b.com/b.js';
x.setAttribute("type", "text/javascript");
document.body.appendChild(x);

通过动态标签注入的必须是可执行的JavaScript代码,因此无论是你的数据格式什么都必须封装在一个回调函数中.一个回调函数如下:

www.a.com/a.html中的script

functiondynCallback(data){
  //处理数据, 此处简单示意一下
  alert(data.content);
} 

在这个例子中,www.b.com/b.js需要将数据封装在上面这个dynCallback函数中,如下:

dynCallback({content:'Hello World'}) 

我们看到了让人开心的结果,Hello World~

不过动态脚本注入还是存在不少问题的,下面我们拿它和XMLHttpRequest来对比一下:

XmlHttpRequestDynamic Script Tag
跨浏览器兼容NoYes
跨域限制YesNo
接收HTTP状态YesNo (除了200)
支持Get、PostYesNo (GET only)
发送、接收HTTP头YesNo
接收XMLYesYes
接收JSONYesYes
支持同步、异步YesNo (只能异步) 

可以看出,动态脚本注入还是有不少限制,只能使用Get,不能像XHR一样判断Http状态等.而且使用动态脚本注入的时候必须注意安全问题.因为JavaScript没有任何权限与访问控制的概念,通过动态脚本注入的代码可以完全控制整个页面,所以引入外部来源的代码必须多加小心.

分享到：