項目總結03：window.open()方法用於子窗口數據回調至父窗口，即子窗口操作父窗口

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()方法