参考：http://geeksun.iteye.com/blog/1070607

/**
* iframe跨域提交大数据
* @param action 跨域地址
* @param arr [
{name:'loginName',value:'liuxw'},
{name:'password',value:'123456'}
]
* @param callUrl 服务器重定向该url指向画面。(callUrl所指向画面与IframCall函数调用画面在同一域名下)
*/
function IframCall(formName,action,arr,callUrl){

var _html='<form action="'+action+'" id="'+formName+'" name="'+formName+'" method="post" target="_hidden_frame" >' ;

for(var ii in arr) {
_html += '<input name="' + arr[ii].name + '" value="' + arr[ii].value + '" />';
}

//追加跨域回调url，服务器处理完请求后，直接重定向到该url所指向画面。
//url所指向画面与当前画面处于同一域名下。
_html += '<input name="callUrl" value="'+callUrl+'" />';

_html+='<iframe name="_hidden_frame" id="_hidden_frame" style="display:none"></iframe>';

_html+='</form>';

//表单追加到body元素
document.body.appendChild(_html);
//提交表单
document.getElementsByName(formName).submit();
}

//该函数定义在父画面(iframe里的画面称子画面)
function callback(result){
alert(result);
}

##调用IframCall(formName,action,arr,callUrl)提交表单到服务器。

##假设callUrl指向deal_callBack.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>跨域回调处理</title>
</head>
<body>
<script type="text/javascript">
//服务器重定向到本页面后
window.onload=function(){
//接收回传参数进行处理，
var rs = window.location.search.split('?').slice(1);
var result=rs.toString().split('=').slice(1);
//回调父画面函数callBack(iframe里的画面称子画面)
window.parent.callback(decodeURI(result));
};
</script>
</body>
</html>

#服务器处理跨域请求，示例
/**
* 保存作业
*/
@RequestMapping("saveWork")
@ResponseBody
public void uploadWorkImg(HttpServletRequest request, HttpServletResponse response,
@RequestParam(value="imgStr",required = true) String imgSrc,
@RequestParam(value="workName",required = true) String workName,
@RequestParam(value="pageId",required = true) String pageId,
@RequestParam(value="chapterId",required = true) String chapterId,
@RequestParam(value="userId",required = true) String userId,
@RequestParam(value="opeartor",required = false) String opeartor,
@RequestParam(value = "callUrl",required = true) String callUrl)
throws IOException {
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");

String result = "";
Date dt = new Date();

// base64解码
byte[] b = null;
sun.misc.BASE64Decoder decoder = new sun.misc.BASE64Decoder();
b = decoder.decodeBuffer(imgSrc);
for (int i = 0; i < b.length; ++i) {
if (b[i] < 0) {// 调整异常数据
b[i] += 256;
}
}
//图片文件流上传至服务器
InputStream ins = new ByteArrayInputStream(b);
//save File
String resPath=PropertiesUtils.getString("ecourse_fs_path");
String extFilename = "png";
String saveFilename=(new RandomGUID()).toString()+"."+extFilename;
//save path md(1-2)/md(3-4)/md5
String saveDir =saveFilename.substring(0,2)+"/"+saveFilename.substring(2,4)+"/";
String fullpathname=resPath+saveDir+saveFilename;

logger.info("fullpathname:"+fullpathname);

FileUtils.copyInputStreamToFile(ins, new File(fullpathname));

logger.info("--uploadTest end--");

//保存
WorkInfo workInfo = new WorkInfo();
workInfo.setWorkName(workName);
workInfo.setImgSrc(saveFilename);
workInfo.setPageId(Integer.parseInt(pageId));
workInfo.setChapterId(Integer.parseInt(chapterId));
workInfo.setCreateDatetime(dt);
workInfo.setCreateOperator(opeartor);
workInfo.setUserId(Integer.parseInt(userId));

ServiceResult<Boolean> serviceResult = myWorkApi.addWork(workInfo);
if (!serviceResult.isOk()) {
result = "保存失败！";
} else {
result = "保存成功！";
}
// callUrl为回调url,result为回传参数
response.addHeader("Location", callUrl + "?result=" + URLEncoder.encode(result, "utf-8"));
response.sendRedirect(callUrl + "?result=" + URLEncoder.encode(result, "utf-8"));
}

iframe无刷新跨域并获得返回值的更多相关文章

  1. iframe无刷新跨域上传文件并获取返回值

    通常我们会有一个统一的上传接口,这个接口会被其他的服务调用.如果出现不同域,还需要无刷新上传文件,并且获取返回值,这就有点麻烦了.比如,新浪微博启用了新域名www.weibo.com,但接口还是使用原 ...

  2. iframe无刷新跨域上传文件并获得返回值

    原文:http://geeksun.iteye.com/blog/1070607 需求:从S平台上传文件到R平台,上传成功后R平台返回给S平台一个值,S平台是在一个页面弹出的浮窗里上传文件,所以不能用 ...

  3. 小米手机跨域问题，返回resphone：undefined，status 0

    小米手机跨域问题,返回resphone:undefined,status 0我小米note2的手机登录不上,返回resphone:undefined,status 0 我手机登录不了的问题解决了,后台 ...

  4. 黄聪：利用iframe实现ajax 跨域通信的解决方案（转）

    原文:http://www.cnblogs.com/xueming/archive/2013/02/01/crossdomainajax.html 在漫长的前端开发旅途上,无可避免的会接触到ajax, ...

  5. 使用 iframe + postMessage 实现跨域通信

    在实际项目开发中可能会碰到在 a.com 页面中嵌套 b.com 页面,这时第一反应是使用 iframe,但是产品又提出在 a.com 中操作,b.com 中进行显示,或者相反. 1.postMess ...

  6. iframe嵌套页面 跨域

    父级调用iframe方法: document.getElementById("iframe").contentWindow.func(data1,data2...) 子级 ifra ...

  7. ajax ＋jsp＋iframe无刷新上传文件[转]

    http://hi.baidu.com/zj360202/blog/item/f23e3711f929c774cb80c475.html ajax jsp 无刷新上传文件 2009-10-26 16: ...

  8. Html使用Iframe无刷新上传文件，后台接收

    html代码:我是发送请求到teacher_center.aspx,不是到.ashx一般处理程序里,需要加 runat="server",有空我再试试发送请求到 .ashx 里 & ...

  9. SpringBoot22 Ajax跨域、SpringBoot返回JSONP、CSRF、CORS

    1 扫盲知识 1.1 Ajax为什么存在跨域问题 因为浏览器处于安全性的考虑不允许JS执行跨域请求. 1.2 浏览器为什么要限制JS的跨域访问 如果浏览器允许JS的跨域请求就很容易造成 CSRF (C ...

随机推荐

  1. Python * 和 ** 参数问题

    Problem def calcuate(*keys) def calcluate(**keys) Slove *: 用来传递人一个无名字的参数,这些参数会以一个Tuple的形式来访问. **: 用来 ...

  2. <<< commons-fileupload 和 ajaxfileupload 实现局部上传

    最近弄了一个上传,要求实现页面的局部刷新,Java的上传组件大多还是用的 commons-fileupload,网上搜索了好多的教程,太麻烦了,看到了ajaxfileupload这个插件,不错,实现简 ...

  3. 用<forEach>遍历list集合时，提示我找不到对象的属性

    <c:forEach items="${list}" var="item"> <tr> <td>${item.UserId} ...

  4. 【URLDecoder】java.lang.IllegalArgumentException: URLDecoder: Illegal hex characters in es

    Java调用 URLDecoder.decode(str, "UTF-8"); 抛出以上的异常,其主要原因是% 在URL中是特殊字符,需要特殊转义一下, 上面的字符串中'%'是一个 ...

  5. js闭包的作用域以及闭包案列的介绍：

    转载▼ 标签: it   js闭包的作用域以及闭包案列的介绍:   首先我们根据前面的介绍来分析js闭包有什么作用,他会给我们编程带来什么好处? 闭包是为了更方便我们在处理js函数的时候会遇到以下的几 ...

  6. can't debug windows service in win7 64bit

    if encount below error: Solution: run the command “vsdiag_regwcf.exe -i” as admin in C:\Program File ...

  7. Solr5.4.0部署到Tomcat

    所用工具 下载 solr 5.4.0 版本:http://www.apache.org/dyn/closer.lua/lucene/solr/5.4.0 下载 Tomcat(6以上版本),另外可以根据 ...

  8. CSS-dl+dt+dd的应用(非常实用)

    http://smallpig301.blog.163.com/blog/static/9986093201010262499229/

  9. PHP采集curl应用的一点小疑惑

    CURL 是 Client URL Library Functions 的缩写,由 Daniel Stenberg 创建,更多内容可以参考他的网站.最近几天突然对 HTTP 采集有了兴趣.之前我在做这 ...

  10. 笨办法学Python (exercise1-15)

    #exercise1print "Hello world!"print "Hello Again"print "I like typing this. ...