iframe无刷新跨域并获得返回值
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了iframe无刷新跨域并获得返回值相关的知识，希望对你有一定的参考价值。
参考：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无刷新跨域并获得返回值的主要内容，如果未能解决你的问题，请参考以下文章