注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

学会珍惜

You've been saying for the longest time

 
 
 

日志

 
 

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

2012-09-26 17:52:44|  分类: 前端开发 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

转自:三十岁

这种方法也叫"动态脚本注入".这种技术克服了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'})

解决JS的跨域问题–动态Script标签(Dynamic Script Tag) - 听歌 - 学会珍惜
 

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

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

 

XmlHttpRequest

Dynamic Script Tag

跨浏览器兼容

No

Yes

跨域限制

Yes

No

接收HTTP状态

Yes

No(除了200)

支持GetPost

Yes

No(GET only)

发送、接收HTTP

Yes

No

接收XML

Yes

Yes

接收JSON

Yes

Yes

支持同步、异步

Yes

No(只能异步)

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

  评论这张
 
阅读(590)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017