一般解决跨越请求什么的,有很多方法,但前端一般都是基于ajax的,你可以通过设置参数或者jsonp什么的跨域,但是有的时候我们碰到很古老的跨域方式:iframe+form。说实在的,现在用这种方式已经不多了,因为这种方式比较繁琐,现在用ajax就已经可以很方便的解决问题了。

但是最近在看kindeditor富文本编辑器,因为我的图片服务器放在七牛,发现如果直接配置七牛的域名就出现跨域了。因此今天就讲讲如何通过iframe+form实现跨域的。

基本思路

总体的流程大致如下:

background Layer 1 客户端 服务端 iframe form http://client.com/a.html http://server.com action:http://server.com 1关联,提交 http://client.com/proxy.html 结果在参数上 发送请求 {url:'http://...jpg'} 3.将参数上的结果 2.返回代理页面 写到body下 4.取iframe中 的内容

上面的图可能比较复杂,不过别着急,慢慢来。首先我们可以模拟的是新建一个页面,然后放一个form和iframe,我们将form和iframe关联,当form执行submit的时候,让结果返回到iframe里,我们看看会发生什么:

我们可以看看当我们选择图片之后,点击提交,最后的结果到底什么情况:

当我们点击提交后,form表单提交到了up.qiniu.com,然后结果返回到了iframe里(通过form上设置target),iframe里面有了返回的结果,但是因为iframe是来自up.qiniu.com的内容,因此本地(localhost)是无法拿到里面的内容的,也就会报以下的错误:

要想可以拿到里面的内容,我们就需要up.quniu.com那边做一次跳转,跳转到我们这边到一个临时页面,同时将结果放在参数上,再由这个页面处理参数,把结果放在页面上:

上面的demo中,我们已经将iframe设置成display:none了,服务端那边会跳转到我们临时页面returnUrl.html上,同时把图片的结果放在参数上,我将在returnUrl.html上将参数直接放入body中,等待外层页面来取。外层取的主要代码如下:

因此我们可以知道,如果要实现iframe+form跨域,那么客户端需要一个中转页面,服务端需要做一个重定向,因此还是比较复杂的。

DEMO下载

点击下载 [0积分]一共下载0

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字