码迷,mamicode.com
首页 > 其他好文 > 详细

iframe无刷新跨域并获得返回值

时间:2016-05-27 16:28:31      阅读:315      评论:0      收藏:0      [点我收藏+]

标签:

参考: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无刷新跨域并获得返回值

标签:

原文地址:http://www.cnblogs.com/xiaowei1763369680/p/5534779.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!