父子窗口以及，子框弹框之间的数据传递。

有这样一个需求：A是主页，在A中点击按钮，弹出一个框B，加载数据，B中点击某条数据，弹出C框，编辑C框的数据后，B框的数据是修改后的数据。这个需求的关键是，1.框与框数据的传递。2.异步加载数据做法：1.在jquery的基础下写个js工具类：//弹出窗口var Common = {dialog:function(properties){var width = window.screen.availWidth; //网页可见区域宽var height = window.screen.availHeight; //网页可见区域高var modal = false; /*非模态窗口*/var winName = "_blank"; var scroll = "yes"; var resizable = "yes"; var status = "no"; var fullscreen = "no"; //var center = "yes"; var help = "no";var url = properties.url; var id=""; var title=""; var lock = true; /*锁*/ var fieldId=""; var fieldName=""; var openerWin=null;if (properties.modal != undefined) modal = properties.modal;if (properties.fieldId != undefined) fieldId = properties.fieldId; // 字段IDif (properties.fieldName != undefined) fieldName = properties.fieldName; // 字段名称if (properties.width != undefined) width = properties.width;if (properties.height != undefined) height = properties.height;//if (properties.center != undefined) center = properties.center;//if (properties.help != undefined) help = properties.help;var iTop = (window.screen.height - height) / 2;var iLeft = (window.screen.width - width) / 2;if (properties.iTop != undefined) iTop = properties.iTop;if (properties.iLeft != undefined) iLeft = properties.iLeft;if (fieldId!="" && fieldName!=""){ // 存在参数if (url.indexOf("?")>=0)url = url +"&fieldId="+fieldId+"&fieldName="+fieldName;elseurl = url +"?fieldId="+fieldId+"&fieldName="+fieldName;}if(modal){if (properties.id != undefined) id = properties.id;if (properties.title != undefined) title = properties.title;if (properties.lock != undefined) lock = properties.lock;if (properties.openerWin != undefined) openerWin = properties.openerWin; // 父窗口对象if (properties.width == undefined){width = document.body.clientWidth; //网页可见区域宽width = width - 80;}if (properties.height == undefined){height = document.body.clientHeight; //网页可见区域高height = height - 50;}if(openerWin == null){$.dialog({ id:id, title:title, lock: lock, fixed: true, width: width+"px", height: height+"px", content: "url:"+url });}else{openerWin.$.dialog({ id:id, title:title, lock: lock, fixed: true, width: width+"px", height: height+"px", content: "url:"+url, parent:frameElement.api });}//return window.showModalDialog(url,window,"dialogLeft="+iLeft+";dialogTop="+iTop+";dialogWidth="+width+"px;dialogHeight="+height+"px;resizable="+resizable+";scroll="+scroll+";status="+status+";center="+center+";help="+help+";");}else{if (properties.winName != undefined) winName = properties.winName;if (properties.scroll != undefined) scroll = properties.scroll;if (properties.resizable != undefined) resizable = properties.resizable;if (properties.status != undefined) status = properties.status;if (properties.fullscreen != undefined) fullscreen = properties.fullscreen;return window.open(url,winName,'height='+(height-80)+',width='+(width-10)+',top='+iTop+',left='+iLeft+',scrollbars='+scroll+',resizable='+resizable+',status='+status+',fullscreen='+fullscreen+',location=no,toolbar=no,menubar=no');}},singleUserSelect:function(properties){ //单选用户var fieldId = "", fieldName = "", param = ""; var openerWin=null;var width = 600; //网页可见区域宽var height = document.body.clientHeight-30; //网页可见区域高if(properties != undefined){if (properties.fieldId != undefined && properties.fieldName != undefined){fieldId = properties.fieldId; // 字段IDfieldName = properties.fieldName; // 字段名称var userId = document.getElementById(fieldId).value;var userName = encodeURI(encodeURI(document.getElementById(fieldName).value));//两次编码,后台解码param = "&userId="+userId+"&userName="+userName+"&fieldId="+fieldId+"&fieldName="+fieldName;}if (properties.hideState != undefined) param += "&hideState="+properties.hideState; //隐藏状态，默认不显示隐藏；hideState=y显示隐藏组织、用户,if (properties.dialogFrameId != undefined) param += "&dialogFrameId="+properties.dialogFrameId; // 窗口IFrame,IDif (properties.width != undefined) width = properties.width;if (properties.height != undefined) height = properties.height;if (properties.openerWin != undefined) openerWin = properties.openerWin; // 父窗口对象}if(openerWin == null){$.dialog({ id:"singleUserDLG", title:"人员选择框(单选)", lock: true, fixed: true, width: width+"px", height: height+"px", content: "url:"+ctx+"/sysorganization/userSelect.do?stype=single"+param });}else{openerWin.$.dialog({ id:"singleUserDLG", title:"人员选择框(单选)", lock: true, fixed: true, width: width+"px", height: height+"px", content: "url:"+ctx+"/sysorganization/userSelect.do?stype=single"+param, parent:frameElement.api });} //return Common.dialog({url:ctx+"/sysorganization/userSelect.do?selectType=single"+param,width:600,height:600,modal:true});},multiUserSelect:function(properties){ //多选用户var fieldId = "", fieldName = "", limitSize = 100, param = ""; var openerWin=null;var width = 600; //网页可见区域宽var height = document.body.clientHeight-30; //网页可见区域高if(properties != undefined){if (properties.fieldId != undefined && properties.fieldName != undefined){fieldId = properties.fieldId; // 字段IDfieldName = properties.fieldName; // 字段名称var userId = document.getElementById(fieldId).value;var userName = encodeURI(encodeURI(document.getElementById(fieldName).value));//两次编码,后台解码param = "&userId="+userId+"&userName="+userName+"&fieldId="+fieldId+"&fieldName="+fieldName;}if (properties.hideState != undefined) param += "&hideState="+properties.hideState; //隐藏状态，默认不显示隐藏；hideState=y显示隐藏组织、用户,if (properties.dialogFrameId != undefined) param += "&dialogFrameId="+properties.dialogFrameId; // 窗口IFrame,IDif (properties.limitSize != undefined){ param += "&limitSize="+properties.limitSize; /*限制选择用户数*/ }else{ param += "&limitSize="+limitSize; /*默认100个用户*/ }if (properties.lmtPersonId != undefined) param += "&lmtPersonId="+properties.lmtPersonId;if (properties.lmtOrgId != undefined) param += "&lmtOrgId="+properties.lmtOrgId;if (properties.lmtRoleId != undefined) param += "&lmtRoleId="+properties.lmtRoleId;if (properties.width != undefined) width = properties.width;if (properties.height != undefined) height = properties.height;if (properties.openerWin != undefined) openerWin = properties.openerWin; // 父窗口对象}else{param = "&limitSize="+limitSize;}if(openerWin == null){$.dialog({ id:"multiUserDLG", title:"人员选择框(多选)", lock: true, fixed: true, width: width+"px", height: height+"px", content: "url:"+ctx+"/sysorganization/userSelect.do?stype=multi"+param });}else{openerWin.$.dialog({ id:"multiUserDLG", title:"人员选择框(多选)", lock: true, fixed: true, width: width+"px", height: height+"px", content: "url:"+ctx+"/sysorganization/userSelect.do?stype=multi"+param, parent:frameElement.api });}},clearFieldValue:function(properties){ //清空字段值var fieldId=""; var fieldName="";if (properties.fieldId != undefined) fieldId = properties.fieldId; // 字段IDif (properties.fieldName != undefined) fieldName = properties.fieldName; // 字段名称if(fieldId!="") $("#"+fieldId).val("");if(fieldName!="") $("#"+fieldName).val("");},showBottomMsg:function(msg){ //底部居中提示,延迟4秒自动关闭$.messager.show({title:"提示",msg:msg,showType:"slide",style:{right:"",top:"",bottom:-document.body.scrollTop-document.documentElement.scrollTop}});},clearForm:function(f_id){ //重置表单var f = $("#"+f_id);f.find(":input:hidden").each(function(i){this.value="";});f.get(0).reset();},getFormJson:function(id){ //将form中的值转换为键值对,例如：{id:'1',name: 'name01'}var paramJson = {};var fields = $("#"+id).serializeArray(); //返回的JSON对象是由一个对象数组组成的 [ {name: 'firstname', value: 'Hello'}, {name: 'lastname', value: 'World'}, {name: 'alias'}, // this one was empty ]jQuery.each(fields, function(i, field){paramJson[this.name] = this.value || '';});return paramJson;},downloadFile:function(id){//公共附件下载$("#frameForDownload").remove();var iframe = document.createElement("iframe");iframe.id = "frameForDownload";iframe.src = ctx+"/filedownload?fileid="+id;iframe.style.display = "none";document.body.appendChild(iframe); //创建完成之后，添加到body中},colseDialog:function(){frameElement.api.close(); // 关闭窗口},setTopDialog:function(){frameElement.api.zindex(); // 置顶窗口}};

这个类中我们要用到的API是：
Common.dialog({id:"orgDLG","title":"新增组织","url":url,"width":800,"height":450,modal:true});

Common.dialog({openerWin:W,title:"组织选择",fieldId:"ss",fieldName:"parentName",url:URL,width:550,height:420,modal:true});<span style="white-space:pre">	</span>  

ss表示当前页面的标签id.  W是父窗口：这个值可以使用      var W = frameElement.api.opener;   获取。从一个框到另外一个框，必须传入此值。

类似于此：id是弹出框id，框与框数据传递要通过它来找到框中的元素。   url是一个页面，页面中有很多html标签，如果要从其他框获取这个页面的html标签，那么需要通过设置的id.  model表示是模态框。

下面是A页面弹出B框，B框弹C框，C框中为B框中的元素设置值，B框为A框设置值，C框为A框设置值：

A是页面：

<input type="button" value="woshihh" onClick="tankuangla()"/>   <script>      function tankuangla()   {   <span style="white-space:pre">		</span>var URL = "${pageContext.request.contextPath}/cmdb/gg.do";<span style="white-space:pre">			</span>Common.dialog({id:"orgDLG",title:"组织选择",url:URL,width:550,height:420,modal:true});<span style="white-space:pre">	</span>     }      function gg()   {   alert("gg中调用");   }         function hh()   {   alert("HH中调用");   }   </script>

B页面：<pre name="code" class="html"> <body><input type="text" value="good" id="ss"><input type="button" id="wssss" value="dankuang" onclick="tankuang()"><input type="button" id="wssss" value="调用ff中的gg" onclick="usegg()"><script>var W = frameElement.api.opener; //父window对象function tankuang(){var URL = "${pageContext.request.contextPath}/cmdb/hh.do?stype=s&dialogFrameId=orgDLG";Common.dialog({openerWin:W,title:"组织选择",fieldId:"ss",fieldName:"parentName",url:URL,width:550,height:420,modal:true});}function usegg(){W.gg();}</script></body>

C框：

 <body><input type="button"  value="woshihh" onClick="fanzhi()"><input type="button"  value="调用ff中的hh" onClick="usehh()"><script>var api = frameElement.api, W = api.opener; //父window对象function fanzhi(){alert("${param.dialogFrameId}");api.get("${param.dialogFrameId}").document.getElementById("${param.fieldId}").value ="wpca";//api.get("${param.dialogFrameId}").document.getElementById("${param.fieldId}").value = "xiasdsd";colseWin();}function colseWin(){if("${not empty param.dialogFrameId}"=="true")api.get("${param.dialogFrameId}").Common.setTopDialog();frameElement.api.close();}function usehh(){W.hh();}</script></body>

工作上类似于这样的需求还是蛮多：常常要把马上修改的东西，异步加载到父窗口。