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"));
}

时间: 2024-11-10 23:29:04

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

利用iframe无刷新上传文件的坑

原文:利用iframe无刷新上传文件的坑 页面里经常要用到文件上传的功能,而且要求页面不刷新,先说一下原理:页面里放一个file控件和submit按钮,外面用form表单包住,给form表单加上对应的属性值,action.method.entype.name,到这一步,能上传文件了,但是这样上传文件会刷新页面,这不是我们想要的.我们要的是文件上传时不刷新页面,那么也简单,在页面里放一个iframe,设置它的宽高为0,这里有两个坑: 1.需要设置iframe的name值与form的target属性

隐藏iframe无刷新上传文件

首先ajax不能上传文件,这误导了我有段时间,今晚睡不着就照着说明做了个无刷新上传文件 其实原理很简单 <form enctype="multipart/form-data" method="POST" target="upload" action="http://localhost/class.upload.php" > <input type="file" name="upl

axios如何进行跨域以及对返回格式为回调函数字符串的处理

自从vue2.0开始不对vue-resouce进行维护了,转而用axios进行代替,axios的官方文档写的很详细,附上链接一枚:http://www.jianshu.com/p/df464b26ae58 但是,我看完以后有一个疑问,跨域请求呢?where(黑人问号脸),在vue-resouce里面还有http.jsonp进行jsonp的跨域,但是axios,经过询问,是需要开代理才可以. 首先,我们需要在webpack的config的index里面进行代理设置: 添加如下代码: ‘/api’指

iframe 无刷新上传图片以及返回值

后台php代码返回获取内容的值 $imginfo = $upload->getUploadFileInfo (); $wall_img = $imginfo [0] ['savepath'] . $imginfo [0] ['savename']; $array=array( 'wall_img'=>$wall_img, ); echo '<script type="text/javascript">   window.parent.setVal("'

iframe 无刷新上传文件

html端: <form action="/index.php?user&q=code/raise/upfile" id="photo_form" name="photo_form" encType="multipart/form-data" method="post" target="hidden_frame"> //好比新窗口_blank 旧(父)窗口就不会刷新

解决跨域HttpResponseJsonCORS, HttpResponseCORS 返回字典数据

#!/usr/bin/python # -*- coding: UTF-8 -*- import json from django.http import HttpResponse def HttpResponseJsonCORS(request,s): response = HttpResponse(s,content_type="application/json") try: origin = request.META['HTTP_ORIGIN'] except: origin =

Jquery ajax不刷新页面提交action取得返回值

页面采用回调函数function(data) 处理后台返回的结果 a标签onclick事件触发 <a  href ="javascript:void(0);" class="btn btn-default"  id ="add" onclick = "return addproduct(${s.id});">加入秒杀</a> 前台 function addproduct(id){   var mpric

让 umeditor 支持跨域上传图片

事实上,umeditor 上传图片采用的是 form+隐藏iframe方式,已经能做到无刷新跨域上传.但小小遗憾的是做的并不完美,上传图片后,反馈的json信息,js并不能读取.原因在于,js不能操作跨域的iframe. 1 var r = this.contentWindow.document.body.innerHTML; 此句代码在FF Chrome上都会报错.浏览器的这种限制,可以通过两个方式来解决 换成flash上传 主页跟iframe页都设置 document.domain . 第一

js利用form+iframe解决跨域post和get提交

JS跨域提交               ajax可以让我们对页面进行无刷新的操作,给我们前端和后台数据交互带来更多的体验,这里就不多说了,但ajax也有局限性,由于浏览器有安全机制,不 允许我们访问不同域的数据,也就是我们常说的"同源策略",大家可以去了解一下.但我们有时候又有这样的需求,下面我们浅谈一下,解决这种问题的办法. 1.jsonp格式 优点:跨域提交 缺点: 只能进行get方式访问 2.js+form+iframe+php 优点:跨域提交get和post的方式访问都是可以