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

时间: 2024-12-26 14:18:25

window.open()方法用于子窗口数据回调至父窗口,即子窗口操作父窗口的相关文章

js父页面调用子页面数据时,子页面通过父页面传过来的参数回调父页面具体方法

今天写代码时发现同一页面多个地方需要调用同一个子页面,如果多个方法调用时,同一子页面回调父页面方法则会出问题,所以查了下资料,让这个功能通用化,根据具体方法回调具体父页面方法,顺便总结一下,希望以后可以有用,或许可以帮助需要帮助的人 这里使用 eval() 函数 定义和用法 eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码. 父页面调用子页面的路径(子页面的路径)如下 http://localhoust:8080/oss-portlet/html/util/area

[ jquery 文档处理 wrapInner(htm|element|fnl) ] 此方法用于把所有匹配的元素的子元素(包括文本节点)使用指定的 HTML 元素来包裹

此方法用于把所有匹配的元素的子元素(包括文本节点)使用指定的 HTML 元素来包裹 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来 这个函数的原理是检查提供的第一个元素(它是由所提供的HTML标记代码动态生成的),并在它的代码结构中找到最上层的祖先元素--这个祖先元素就是包装元素 html HTML标记代码字符串,用于动态生成元素并包装目标元素 element 用于包装目标元素的DOM元素 fn 生成包裹结构的一个函数 实例: <html lang='zh-cn'> &l

用于处理时序数据的方法和装置

The present invention relates to processing of time series data. There is disclosed a method and apparatus for processing time series data, the method comprising: receiving a time series data set, wherein each element of the time series data set cont

Js弹出窗口代码,window.open方法

<html><script language=JavaScript> <!--function click() {if (event.button==2) {window.open('#','popwindows',"toolbar=no,menubar=no,width=200,height=200")}}document.onmousedown=click//--></script><head><meta http-

[ jquery 效果 fadeToogle([speed,[easing],[fn]]) ] 此方法用于通过切换不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数

此方法用于通过切换不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数: 实例: <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this is my page'> <meta http-equiv='keywords' content='keyword1,keyw

[ jquery 效果 fadeTo([speed,[easing],[fn]]) ] 此方法用于通过调整不透明度的变化至指定目标来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数

此方法用于通过调整不透明度的变化至指定目标来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数 实例: <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this is my page'> <meta http-equiv='keywords' content='keyword1,

Vue父组件向子组件传递方法(自定义方法)并且子组件向父组件传递数据

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

PB 组合数据窗口子窗口数据赋值方法

tab_1.tabpage_3.dw_2.DataObject = "d_sales_popup_head"  tab_1.tabpage_3.dw_2.Reset() datawindowchild dwc[2] //创建窗口型数组tab_1.tabpage_3.dw_2.getchild("dw_1",dwc[1])  //给数组赋值,值为数据窗口数据tab_1.tabpage_3.dw_2.getchild("dw_2",dwc[2]) d

利用window.name+iframe跨域获取数据详解

详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.iframe是html的一个标签,可以在网页中创建内联框架,有个src属性(指向文件地址,html.php等)可以选择内联框架的内容,可以看个例子(猛戳这里),大概了解下就行了.window.name(一般在js代码里出现)的值不是一个普通的全局变量,而是当前窗口的名字,这里要注意的是每个iframe都有包