浏览器iframe跨域

最近项目中使用到了umeditor 1.2.2，在图片上传的过程中遇到跨域问题。umeditor在图片上传模块中使用iframe来获取服务端的返回结果。众所周知，在chrome等浏览器中是不允许iframe跨域访问的。当在不同域下使用umeditor向服务器上传图片时，会报跨域错误.

Cross-Origin Read Blocking (CORB) blocked cross-origin response http://xxxx.com/image/c0d23233851f4f40a0e40f9a0d431597.png?temp=0.9339469703071119 with MIME type application/xml. See https://www.chromestatus.com/feature/5629709824032768 for more details.

经过调试，查阅资料,看到github上有人说可以用window.name来跨域返回上传结果，遂逐一调试，最后终于实现跨域上传图片功能。iframe利用window.name跨域原理网上已经有很多资料了，这里就不在重复。主要讲下如何修改umeditor来实现window.name跨域.由于项目服务端用的是JAVA，这里我就用jsp来举例，其他语言思路也是一致的.

其实umeditor使用window.name跨域非常简单.

1.修改umeditor\jsp\imageUp.jsp中result字符串拼接，以<script>标签返回结果.

String result = "<script>window.name='{\"name\":\""+ up.getFileName() +"\", \"originalName\": \""+ up.getOriginalName() +"\", \"size\": "+ up.getSize() +", \"state\": \""+ up.getState() +"\", \"type\": \""+ up.getType() +"\", \"url\": \""+ up.getUrl() +"\"}' </script>";

2.新建一个空的proxy.html文件

3.修改umeditor\dialogs\image\image.js sumbit方法

var  ifstate=0;
$('<iframe name="up"  style="display: none">    </iframe>').insertBefore(me.dialog).on('load', function(){if (ifstate === 1) {var r = this.contentWindow.name;if(r == '')return;me.uploadComplete(r);$(this).unbind('load');$(this).remove();} else if (ifstate === 0) {ifstate = 1;this.contentWindow.location = "./proxy.html"; }});

这样就解决了umeditor 的上传图片回显的跨域问题

浏览器iframe跨域相关推荐

html的页面怎样直接跨域访问,【HTML】iframe跨域访问问题
概述本地同一浏览器访问本地HTML文件和访问服务器端HTML文件,本地Iframe没有自适应高度,而服务器端的Ifrane自适应了高度. 1.问题重现: Chrome 版本 41.0.2272.10 ...
iframe跨域通信的通用解决方案-第二弹!（终极解决方案）
一年前,我发过一篇关于跨文档通信方案的文章<iframe跨域通信的通用解决方案>,提供了一种基于创建iframe与轮询window.name的方案. 一年后,很高兴地带来彻底改造的新版本. ...
怎样获取不同域名的ifram的html,AJAX | iframe跨域的实现方法
iframe跨域 HTML5学堂:本文当中我们介绍了跨域的基本知识,讲解到了跨域的相关种类,并讲解了解决跨域中的一种方法--如何使用iframe跨域.讲解了iframe跨域的基本原理与流程,并配以实战 ...
利用代理页面解决html iframe跨域访问网站问题
原文:利用代理页面解决html iframe跨域访问网站问题源代码下载地址: http://www.zuidaima.com/share/1854884509142016.htm 在做项目的时候遇到 ...
前端浏览器的跨域问题
相信前端开发必定少不了这个问题. 什么是跨域呢跨域是浏览器的行为,跨域问题其实就是浏览器的同源策略所导致的.同源策略是一个重要的安全策略,它用于限制一个origin的文档或者它加载的脚本如何能与另一 ...
iframe 跨越访问_js iframe跨域访问
1.什么是跨域? 2.前台解决跨域几种方法 2.1 动态创建script 2.2 使用document.domain 2.3使用HTML5新属性postMessage 2.4 利用iframe和loc ...
iframe子页面ajax报错,iframe跨域踩坑
前言工做中,有些系统是利用的iframe.有一次忽然遇到了一个使人费解的跨域报错,没有发请求,却报了"Error:Blocked a frame with origin...from ac ...
iframe 跨域传递 cookie
最近在处理 iframe 跨域通讯(也就是PostMessage的应用,有兴趣可以看一下我的文章),发现了个比较头疼的问题:在 iframe 环境中,无法跨域读取内嵌网页的 cookie ,得到的结果 ...
QQ登录IE下iframe跨域session和cookie失效问题的解决方案
情景:webQQ登录,使用的是跨站点iframe弹窗登录,发现只有在IE浏览器下,登录存储session不起作用,一刷新页面就登出分析:IE限制第三方session/cookie 随着IE版本的不断 ...
chrome浏览器的跨域设置 Google Chrome浏览器下开启禁用缓存和js跨域限制--disable-web-security...
chrome用户默认路径 Win7:C:\Users\[用户名]\AppData\Local\Google\Chrome\User Data\ XP:C:\Documents and Settings ...

浏览器iframe跨域

浏览器iframe跨域相关推荐

最新文章

热门文章