参考: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 爬取乌云所有厂商名字,url,漏洞总数 并存入数据库

    需要:MySQLdb 下面是数据表结构: /* Navicat MySQL Data Transfer Source Server : 127.0.0.1 Source Server Version ...

  2. request 获取服务根目录地址

    这是常用的request获取服务地址的常用方式. 源请求服务地址:http://localhost/api-server/1/forum/thread/hot_topic?sex=1 String p ...

  3. MySQL5.0数据库的安装

    ======================= 未完待续,持续更新中... -------------------------------------------------

  4. 深入理解springAOP

    概念:AOP(Aspect-Oriented Programming)即面向切面编程.它是对传统的OOP(面向对象)编程的一种补充,在OOP中往往一个对象有什么行为我们就定义什么方法,对象与对象之间存 ...

  5. Python之路【第十八篇】Django小项目webQQ实现

    WEBQQ的实现的几种方式 1.HTTP协议特点 首先这里要知道HTTP协议的特点:短链接.无状态! 在不考虑本地缓存的情况举例来说:咱们在连接博客园的时候,当tcp连接后,我会把我自己的http头发 ...

  6. [UML]UML系列——用例图Use Case

    用例图的概念 用例图是描述用例.参与者以及它们之间关系的图. 用例图的作用 用例图是从用户的角度来描述对信息系统的需求,分析产品的功能和行为. 用例图定义和描述了系统的外部可见行为,是分析.设计直至组 ...

  7. alpha版、beta版、rc版的意思

    很多软件在正式发布前都会发布一些预览版或者测试版,一般都叫“beta版”或者 “rc版”,特别是开源软件,甚至有“alpha版”,下面来解释一下各个版本的意思. alpha版:内部测试版.α是希腊字母 ...

  8. LYDSY模拟赛day2 Divisors

    /* 注意分解质因数,如果i是,那么n/i也是,这样就可以解决分解质因数的时间问题了 当 k ≥ 1 时,只有这些数的约数才会对答案产生贡献. 求出 m 个数的所有不超过 n 的约数,去重后统计即可. ...

  9. (转载)JavaWeb学习总结(五十二)——使用JavaMail创建邮件和发送邮件

    博客源地址:http://www.cnblogs.com/xdp-gacl/p/4216311.html 一.RFC882文档简单说明 RFC882文档规定了如何编写一封简单的邮件(纯文本邮件),一封 ...

  10. Nginx/Apache发大招

    导读 网站程序的上传目录通常是不需要PHP执行解释权限,通过限制目录的PHP执行权限可以提网站的安全性,减少被攻击的机率. 下面和大家一起分享下如何在Apache和Nginx禁止上传目录里PHP的执行 ...