window.open()方法用于子窗口数据回调至父窗口，即子窗口操作父窗口

Posted 2020-10-04 我不吃番茄

window.open()方法用于子窗口数据回调至父窗口，即子窗口操作父窗口

项目中经常遇到一个业务逻辑：在A窗口中打开B窗口，在B窗口中操作完以后关闭B窗口，同时自动刷新A窗口(或局部更新A窗口)（或将数据传回A窗口）

以下是从实际项目中截取出来和window.open()方法相关的代码，业务逻辑如下：

　　1. 点击父窗口的div标签（id="addMatchSchedule"），出发点击事件，打开子窗口；

　　2. 点击子窗口的button按钮，触发点击时间，即调用addSchduleItem()函数；

　　3. addSchduleItem()函数执行 window.opener.showAddMatchSchedule(idList,iconList,matchProductNameList)方法；即回调父窗口的showAddMatchSchedule（）函数，在父窗口的div(id="matchFrame")中展示子窗口回调过来的数据;

以上三步实现了两个目的：a.由子窗口向父窗口传递数据，b.在父窗口即时更新的接受的数据；

 

一句话概括思路：在父窗口中打开子窗口，在子窗口中调用父窗口的方法

核心方法：window.open()  （方法介绍在本文尾部）

核心概念：window.opener （方法介绍在本文尾部）

 

父窗口标签：

<div style="width:140px; height:60px; position:relative;dislay:inline-block; margin-right:20px;display:inline-block;cursor: pointer;" id="addMatchSchedule"> </div>
<div id="matchFrame" style="height:70px;display:inline-block;"></div>

父窗口js代码：

$("#addMatchSchedule").click(function(){
	window.open(‘<%=basePath%>product/goAddMatchSchdule.do?‘,"新增","width=500,height=480,screenX=400,screenY=100")
})

　　

父窗口js代码：

//可忽略该函数的具体内容   
 function showAddMatchSchedule(idList,iconList,matchProductNameList){
		var matchFrame =$("#matchFrame");
		var len = idList.length;
		for(var i=0;i<len; i++){
			var id = idList[i];
			var src = iconList[i];
			var matchProductName = matchProductNameList[i];
			var  oDiv = $("<div  class=‘oDiv‘></div>");
		   var inputId=$("<input type=‘hidden‘ name=‘productMatchId‘ value=‘"+id+"‘></input>");
		   var imgIcon=$("<img  class=‘img21‘ src = ‘<%=basePath%>"+src+"‘></img>"); 
		   var span=$("<span style=‘position:absolute;top:60px;left:10px;‘>"+matchProductName+"</span>");

		  <%--  var imgIcon=$("<img class=‘img21‘  style=‘margin-right:20px;‘ src = ‘<%=basePath%>"+src+"‘></img>");   --%>
		   inputId.appendTo(oDiv);
 		   imgIcon.appendTo(oDiv); 
 		   span.appendTo(oDiv); 
 		  oDiv.appendTo(matchFrame); 
		}
}

　　子窗口标签：

<a class="btn btn-small btn-info" onclick="addSchduleItem();" title="确定" >确定</a>			

　　子窗口代码：

//添加搭配，并将数据传回编辑页面;可忽略本函数的具体业务代码
	function addSchduleItem(){
		var idList = new Array();
		var iconList = new Array();
		var matchProductNameList = new Array();
		$("input:checked").each(function(){
			var id = $(this).val();
			idList.push(id);
			var src = $(this).parent().next().val();
			iconList.push(src);
			var matchProductName = $(this).parent().next().next().val();
			matchProductNameList.push(matchProductName);
		})
		if(idList.length == 0){
			alert("请选择搭配方案")
			return;
		}	
　　
	  if (window.opener != null && !window.opener.closed) {
		  window.opener.showAddMatchSchedule(idList,iconList,matchProductNameList);
	  }  
}

　window.open()简介（以具体情况为例）：

　　window.open(‘page.html‘, ‘newwindow‘, ‘height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no‘)   //该句写成一行代码

   参数解释：
       window.open 　　弹出新窗口的命令； 
　　‘page.html‘ 　　弹出窗口的文件名； 
　　‘newwindow‘ 　　弹出窗口的名字（不是文件名），非必须，可用空‘‘代替； 
　　height=100 　　窗口高度； 
　　width=400 　　窗口宽度； 
　　top=0 　　窗口距离屏幕上方的象素值； 
　　left=0 　　窗口距离屏幕左侧的象素值； 
　　toolbar=no　　是否显示工具栏，yes为显示； 
　　menubar，scrollbars 　　表示菜单栏和滚动栏。 
　　resizable=no 　　是否允许改变窗口大小，yes为允许； 
　　location=no 　　是否显示地址栏，yes为允许； 
　　status=no 　　是否显示状态栏内的信息（通常是文件已经打开），yes为允许；

 

window.opener 简介

window.opener 实际上就是通过window.open打开的子窗体的父窗体

本文中window.opener.showAddMatchSchedule(idList,iconList,matchProductNameList);表示直接调用父窗口的showAddMatchSchedule()方法