标签：概念 窗口 inter 执行 return open 简介 pos rod
项目中经常遇到一个业务逻辑：在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(‘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.open打开的子窗体的父窗体
本文中window.opener.showAddMatchSchedule(idList,iconList,matchProductNameList);表示直接调用父窗口的showAddMatchSchedule()方法
window.open()方法用于子窗口数据回调至父窗口，即子窗口操作父窗口
标签：概念 窗口 inter 执行 return open 简介 pos rod
原文地址：http://www.cnblogs.com/wobuchifanqie/p/7434868.html
