layUI子页面向父页面传值

页面向父页面传值"/>

layUI子页面向父页面传值

今天遇到了一个问题，父子iframe传值问题，百度了很多，都没有解决子页面像父页面传值问题

如图所示：

父页面：

子页面：

点击附件就会进入子页面，这里面进行文件上传，需要将上传好的文件ID传回父页面中

我自己写了一个通用方法：

其中也包括了弹出框通用方法

/*** layui弹出框共同方法* @param title 标题* @param url 请求的url* @param w 弹出层宽度（缺省调默认值）* @param h 弹出层高度（缺省调默认值）* @param type 弹出操作类型* @param upload 是否上传* @returns*/
function Modalshow(title,url,w,h,type,upload){if (title == null || title == '') {title=false;};if (url == null || url == '') {url="404.html";};if (w == null || w == '') {w=($(window).width()*0.9);};if (h == null || h == '') {h=($(window).height() - 50);};var btn ="";if (type=='2') {if(upload){btn =['保存','取消','附件']}else{btn =['保存','取消']}}else if (type=='3') {if(upload){btn =['更新','取消','附件']}else{btn =['更新','取消']}}if(type=='1'){layer.open({type: 2,area: [w+'px', h +'px'],anim: 0,fix: false, //不固定maxmin: true,shadeClose: false,btnAlign: 'c',shade:0.4,title: title,content: url,skin: 'layer-myskin',btn: ['确认']});}else{layer.open({type: 2,area: [w+'px', h +'px'],anim: 4,fix: false, //不固定maxmin: true,shadeClose: false,shade:0.4,title: title,content: url,btn: btn,skin: 'layer-myskin',btn1: function(index, layero){$(layero).find("iframe")[0].contentWindow.$('#submitForm').click();},btn2: function(index, layero){layer.close(index);},btn3: function(index, layero){//获取父页面的iframe值var iframeName = $(layero).find("iframe")[0].id;var contextPath= getContextPath();var url = contextPath+'/uploadFilesForworrd';//打开子页面 传入iframe值是为了更好的指定传回值的页面var uploadFileIds = uploadShow("附件列表",url,900,600,iframeName);return false;}});}}
//文件上传modal
function uploadShow(title,url,w,h,iframeName){var uploadFileIds;var btn =['开始上传','保存'];layer.open({type: 2,area: [w+'px', h +'px'],fix: false, //不固定maxmin: true,shadeClose: false,shade:0.4,title: title,content: url,btn: btn,skin: 'layer-myskin',zIndex: layer.zIndex,success: function(layero){layer.setTop(layero);//置顶当前窗口},btn1: function(index, layero){$(layero).find("iframe")[0].contentWindow.$('#uploadFileButton').click();return false;},btn2: function(index, layero){//子页面的元素值uploadFileIds = $(layero).find("iframe")[0].contentWindow.$('#uploadFileIds').val();uploadFileIds=uploadFileIds.substring(0,uploadFileIds.length-1);//datavar dataArray=new Array();var dataMap={};dataMap.name = "FileIds";dataMap.value = uploadFileIds;dataArray.push(dataMap);//elementvar eleArray=new Array();eleArray.push("FileIds");//进行子父页面传值操作setChooseValues(eleArray,dataArray,iframeName,layer,"input","id");}});return uploadFileIds;
}
/*关闭弹出框口*/
function Modalclose(){var index = parent.layer.getFrameIndex(window.name);parent.layer.close(index);
}
/*** * @param _element 元素名称* @param _data 子页面元素名称数据* @param iframeName 父页面iframeName* @param layer 子页面layer* @param type 指定父页面元素dom类型* @param elementPro 指定父页面元素属性* @returns*/
function setChooseValues(_element,_data,iframeName,layer,type,elementPro){var index = layer.getFrameIndex(iframeName);for (var i = 0; i < _element.length; i++) {var element = layer.getChildFrame(type+"["+elementPro+"='"+_element[i]+"']", index);for (var j = 0; j < _data.length; j++) {if(_element[i]==_data[j].name){element[0].value=_data[j].value;}}}
}

其中很好的解决了layUI子父页面传值问题，支持多个值传回父页面，希望能帮助到大家