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

最新推荐文章于 2024-08-16 13:41:04 发布
最新推荐文章于 2024-08-16 13:41:04 发布
阅读量3.1k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shenbushen/article/details/52476382
版权

有这样一个需求：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; // 字段ID
		if (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;
			else
				url = 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; // 字段ID
				fieldName = 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,ID
			if (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; // 字段ID
				fieldName = 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,ID
			if (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; // 字段ID
		if (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" οnclick="tankuang()">
     <input type="button" id="wssss" value="调用ff中的gg" οnclick="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>
 

 


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

 

 

 


                

        

        

    

  


    

      

        

            

              
                
                  shenbushen
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
【LayUI】layui子窗口某行选中后，将相关参数传递回父页面

				
			

			

				

					德仔
				

				

					06-09
					
					821
					
				

			

		

		

			
				
页面信息交互：子页面传值父页面。

			
		

	



                

              
                



	

		

			

				
					
基于elementUI,VUE弹出窗口的实现，以及父子页面数据的传输

				
			

			

				

					weixin_39089331的博客
				

				

					06-05
					
					9785
					
				

			

		

		

			
				
父页面

父页面的弹出框准备好，可以看到我这个父页面有三个弹出框口

<!-- DIALOG Add Button Popup Windows Start DIALOG-->

<el-dialog title="宛先を追加" :visible.sync="addDialog" v-if="addDialog" width="40%">

<companyAddDia...

			
		

	



                


  
              

                


	

		

			

				
					
win32创建子窗口 同时实现子窗口与父窗口传递信息

				
			

			

				

					04-29
				

			

		

		

			
				
win32创建子窗口 同时实现子窗口与父窗口传递信息 同时有win32显示int类型的知识点

			
		

	





	

		

			

				
					
父窗口向子窗口传递值

				
			

			

				

					start1032314909的专栏
				

				

					11-19
					
					925
					
				

			

		

		

			
				
下面是showModalDialog/showModelessDialog使用例子,父窗口向子窗口传递值,子窗口设置父窗口的值,子窗口关闭的时候返回值到父窗口.关闭刷新父窗口,希望对象我这样的WEB开发的菜鸟有所帮助.

(一)showModalDialog使用例子,父窗口向子窗口传递值,子窗口设置父窗口的值,子窗口关闭的时候返回值到父窗口.

farther.html
--------

			
		

	



		

			
		



	

		

			

				
					
Element UI中el-dialog作为子组件如何由父组件控制显示/隐藏~

					
最新发布

				
			

			

				

					m0_62626838的博客
				

				

					08-16
					
					655
					
				

			

		

		

			
				
那么我们可以通过父传子props来将true（即showFlag的值）传递给dialog子组件，然后在子组件中监听showFlag值的变化，一旦出现变化就将showFlag的值赋值给dialogVisible，以此来实现dialog组件的显示。思路：首先我们通过子传父$emit传递一个自定义事件hiddenFlag给父组件，然后在父组件中触发该方法，将showFlag的值变为false即可。1、这里介绍的是将el-dialog作为组件封装便于复用，如何通过父组件控制子组件dialog的显示与隐藏。

			
		

	





	

		

			

				
					
子窗口和父窗口的消息传递

				
			

			

				

					周翔的专栏
				

				

					08-08
					
					5860
					
				

			

		

		

			
				
转至：http://hi.baidu.com/tiancao222/item/d2f0dc370617dff3e6bb7a61
一、 概念：        
1. 什么是窗口       
2. 什么是消息       
3. 什么是窗口过程函数       
4. 怎么创建窗口       
5. 消息是怎么传递并处理的       
二、 方法：       
用调用windo

			
		

	





	

		

			

				
					
父窗口与子窗口的数据传递问题

				
			

			

				

					jackljf的专栏
				

				

					05-05
					
					1384
					
				

			

		

		

			
				
曾经有那么一道题目是关于父窗口与子窗口的数据传递问题.我当时只知道父窗口向子窗口传递数据.不知道子窗口怎么向父窗口传递数据.今天终于把这个问题解决了,呵呵,记录一下:我权且把原始窗口叫父窗口,把从该窗口打开或弹出的窗口或对话框叫子窗口.当然打开子窗口可用window.open()或window.showModalDialog()[与window.showModelessDialog()类似].

			
		

	





	

		

			

				
					
父子窗口传递数据

				
			

			

				

					weixin_33670786的博客
				

				

					09-30
					
					90
					
				

			

		

		

			
				
为什么80%的码农都做不了架构师？>>> 
                                        
                ...

			
		

	





	

		

			

				
					
详解layui弹窗父子窗口之间传参数的方法

				
			

			

				

					08-28
				

			

		

		

			
				
layui 弹窗父子窗口之间传参数的方法  layui 是一个非常流行的前端框架，它提供了许多实用的功能，例如弹窗功能。...我们可以在 success 属性中传递参数给子窗口，从而实现父子窗口之间的数据交互。

			
		

	





	

		

			

				
					
uniapp父子界面间的数据传递

				
			

			

				

					asunny_的博客
				

				

					01-24
					
					762
					
				

			

		

		

			
				
uniapp父子界面间的数据传递
​		在做项目中遇到了点击一个选项卡片(展示部分信息)，然后在另一个界面中需要展示这个卡片中所有数据的详细内容的功能。下面是能够拿到数据的两种方法：
一、使用storage缓存完成(可以实现效果)
​		在uniapp官网API中提供了数据缓存的方法uni.getStorage(object)和uni.setStorage(object)。通过这两个方法，我们可以将相应的数据存储到缓存中去，并在另一个界面中拿到数据进行使用。关于方法的具体说明小伙伴可以去官网查看详情，这里不

			
		

	





	

		

			

				
					
layui open传参_详解layui弹窗父子窗口之间传参数的方法

				
			

			

				

					weixin_42506647的博客
				

				

					12-31
					
					1888
					
				

			

		

		

			
				
本文介绍了layui弹窗父子窗口之间传参数的方法，分享给大家，具体如下：1、父页面打开子页面并向子页面传参数function setChooseValues(ret){var oView = document.getElementById("userName");var oValue = document.getElementById("userIds");var i = 0;...

			
		

	





	

		

			

				
					
pyqt父子窗口相互传值

				
			

			

				

					05-30
				

			

		

		

			
				
pyqt父子窗口相互传值
pyqt信号槽的使用
对新手可能有帮助

			
		

	





	

		

			

				
					
windows 父子窗口传值

				
			

			

				

					ljmkmnkl的博客
				

				

					01-20
					
					323
					
				

			

		

		

			
				
需求：

需要把5个独立开发的管理端系统在一个网页端浏览（在不影响原系统的前提）
（因此想到了ifame，但是在子窗口中，如果登录信息失效，则需要用到父子组件传值）

父组件传值给子组件

  //父窗口 html
  @load 处理ifame加载等待
 <iframe class="iframe" ref="iframe" :src="url" frameborder="0" @loa...

			
		

	





	

		

			

				
					
jquery使两个文本框动态传值（基于监听事件）

				
			

			

				

					xiamencgf的博客
				

				

					11-28
					
					619
					
				

			

		

		

			
				
监听事件（点击）
<input type="text" value="输入" id="txt-set"/>
<input type="text" value="输出" id="txt-get"/>
<script>
    $(function () {
        $("#txt-set").on('click',function (event) {
  ...

			
		

	





	

		

			

				
					
父子窗口

				
			

			

				

					huanghm88的专栏
				

				

					02-23
					
					811
					
				

			

		

		

			
				
showModalDialog()    (IE    4+    支持)         showModelessDialog()    (IE    5+    支持)         window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。         window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话

			
		

	





	

		

			

				
					
window父子窗口交互

				
			

			

				

					雪非白的博客
				

				

					02-29
					
					850
					
				

			

		

		

			
				
在前端中，可以通过window.open打开新窗口，那么新窗口可以与旧窗口进行数据交互吗？
答案当然是可以的，父窗口在打开子窗口时，子窗口的window对象会有一个opener打开者，代表的正是父窗口的window对象，我们可以通过这个opener对象对父窗口进行操纵。
以下代码请在一个项目中使用，用本地文件来调试，opener对象无效
父窗口
<html !DOCTYPE>
<...

			
		

	





	

		

			

				
					
父子窗口进行通信

				
			

			

				

					AnitaSun的博客
				

				

					11-12
					
					516
					
				

			

		

		

			
				
准备工作

创建一个文件夹，建立content.html和test.html文件
使用VSCode打开这个文件夹

代码

test.html<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>fi

			
		

	





	

		

			

				
					
当前窗口与弹出窗口之间的数据交互

				
			

			

				

					xjh1991xjh的专栏
				

				

					09-25
					
					803
					
				

			

		

		

			
				
首先，创建一个MXML应用，代码如下：

			
		

	





	

		

			

				
					
javascript操作框架和窗口

				
			

			

				

					
				

				

					03-03
					
					2031
					
				

			

		

		

			
				
一、Iframe 篇 //&&&&&&&&&&&&&&&&&&&&公共方法开始&&&&&&&&&&&&&&&//父对象得到子窗口的值//ObjectID是窗口标识，ContentID是元素IDfunction GetValue(ObjectID,ContentID){       var IsIE = (navigator.appName == Microsoft I

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值