首页 > 代码库 > 让 umeditor 支持跨域上传图片

让 umeditor 支持跨域上传图片

事实上,umeditor 上传图片采用的是 form+隐藏iframe方式,已经能做到无刷新跨域上传。但小小遗憾的是做的并不完美,上传图片后,反馈的json信息,js并不能读取。原因在于,js不能操作跨域的iframe。

 1 var r = this.contentWindow.document.body.innerHTML; 

此句代码在FF Chrome上都会报错。浏览器的这种限制,可以通过两个方式来解决

  1. 换成flash上传
  2. 主页跟iframe页都设置 document.domain 。

第一种方式,虽然可以完美实现,但对umeditor改动太多,后期维护更是麻烦。

第二种方式,如果页面太多就麻烦了,而且貌似只能设置同一个域名下的二级或三级域名(未亲测)

 

再经过一番搜索后,发现了第三种方式,实现起来很巧妙,能一劳永逸的解决问题。

思路为:比如你的主战是 a.com ,你要将图片传至b.com。那么a.com的代码为

1 <iframe src="b.com/upload.html" />

b.com/upload.html 再包含a.com的页面,并将js输出到a.com/crossiframe.html

1 <iframe src="a.com/crossiframe.html?js=alert(0)" />

 

此思路不仅可以只用来解决umeditor的图片上传问题,一样可以用在js操作跨域iframe的问题上。