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 (方法介绍在本文尾部)

父窗口标签:

  1. <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代码:

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

  

父窗口js代码:

  1. //可忽略该函数的具体内容
    function showAddMatchSchedule(idList,iconList,matchProductNameList){
  2. var matchFrame =$("#matchFrame");
  3. var len = idList.length;
  4. for(var i=0;i<len; i++){
  5. var id = idList[i];
  6. var src = iconList[i];
  7. var matchProductName = matchProductNameList[i];
  8. var oDiv = $("<div class='oDiv'></div>");
  9. var inputId=$("<input type='hidden' name='productMatchId' value='"+id+"'></input>");
  10. var imgIcon=$("<img class='img21' src = '<%=basePath%>"+src+"'></img>");
  11. var span=$("<span style='position:absolute;top:60px;left:10px;'>"+matchProductName+"</span>");
  12.  
  13. <%-- var imgIcon=$("<img class='img21' style='margin-right:20px;' src = '<%=basePath%>"+src+"'></img>"); --%>
  14. inputId.appendTo(oDiv);
  15. imgIcon.appendTo(oDiv);
  16. span.appendTo(oDiv);
  17. oDiv.appendTo(matchFrame);
  18. }
  19. }

  子窗口标签:

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

  子窗口代码:

  1. //添加搭配,并将数据传回编辑页面;可忽略本函数的具体业务代码
  2. function addSchduleItem(){
  3. var idList = new Array();
  4. var iconList = new Array();
  5. var matchProductNameList = new Array();
  6. $("input:checked").each(function(){
  7. var id = $(this).val();
  8. idList.push(id);
  9. var src = $(this).parent().next().val();
  10. iconList.push(src);
  11. var matchProductName = $(this).parent().next().next().val();
  12. matchProductNameList.push(matchProductName);
  13. })
  14. if(idList.length == 0){
  15. alert("请选择搭配方案")
  16. return;
  17. }
      
  18. if (window.opener != null && !window.opener.closed) {
  19. window.opener.showAddMatchSchedule(idList,iconList,matchProductNameList);
  20. }
  21. }

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

项目总结03:window.open()方法用于子窗口数据回调至父窗口,即子窗口操作父窗口的更多相关文章

  1. VUE 父组件与子组件交互

    1. 概述 1.1 说明 在项目过程中,会有很多重复功能在多个页面中处理,此时则需要把这些重复的功能进行单独拎出,编写公用组件(控件)进行引用.在VUE中,组件是可复用的VUE实例,此时组件中的dat ...

  2. iframe通信相关:父操作子,子操作父,兄弟通信

    这里写window和document是认为代表了BOM和DOM(个人理解不一定对) 拿到了window就能操作全局变量和函数 拿到了document就能获取dom,操作节点 父操作子 window:选 ...

  3. vue:再vue-cli项目中使用window以及调用window上的方法

    一: 1:在main.js中 Vue.prototype.myfunction = function() {/*你的自定义Vue方法*/} 2:在mounted(或其他生命周期中) 或者 method ...

  4. VB的一些项目中常用的通用方法-一般用于验证类

    1.VB的一些项目中常用的通用方法: ' 设置校验键盘输入值,数字 Public Function kyd(key As Integer) As Integer Dim mychar mychar = ...

  5. vue+element ui项目总结点(四)零散细节概念巩固如vue父组件调用子组件的方法、拷贝数据、数组置空问题 等

    vue config下面的index.js配置host: '0.0.0.0',共享ip (假设你的电脑启动了这个服务我电脑一样可以启动)-------------------------------- ...

  6. window.opener方法的使用 js跨域

    原文:window.opener方法的使用 js跨域 最近公司网站登陆加入了第三方登陆.可以用QQ直接登陆到我们网站,在login页面A中点QQ登陆时,调用了一个window.open文件打开一个lo ...

  7. 使用iframe父页面调用子页面和子页面调用父页面的元素与方法

    在实际的项目开发中,iframe框架经常使用,主要用于引入其他的页面.下面主要介绍一下使用iframe引入其他页面后,父页面如何调用子页面的方法和元素以及子页面如何调用父页面的方法和元素. 1.父页面 ...

  8. vue 父组件调用子组件内置方法

    背景介绍:外派到泰康做项目.这个项目中有个选择组织的功能,是一个树桩结构的懒加载,于是我就element-ui的tree组件封装了一个公共的组件. 但是后来发现他们的公司组织结构不是都请求的同一个接口 ...

  9. window.opener方法的使用 js 跨域

    用到了这个方法: window.opener.location.reload() 与 window.opener.location.href=window.opener.location.href 都 ...

随机推荐

  1. 如何禁用Firefox,chrome浏览器“不安全密码警告”

    在任何HTTP页面中,一个全新的“不安全密码警告”将会在用户点击表单时直接出现在登陆框的下方,强行保证所有用户都能看到“此链接不安全,你的个人利益将受到损害”等字眼,同时整个页面也会收到损坏的挂锁图标 ...

  2. DirectX10安装路径自动生成DXSDK_DIR

    DXSDK_DIR C:\Program Files (x86)\Microsoft DirectX SDK (February 2010)\

  3. Mongo 应用查询

    官网操作手册,基本就够用 https://docs.mongodb.com/manual/ 下面是个分组查询的例子,项目中用到然后查了个例子,自己理解了下,觉得很好很强大. https://blog. ...

  4. 2018SDIBT_国庆个人第三场

    A - A CodeForces - 1042A There are nn benches in the Berland Central park. It is known that aiai peo ...

  5. ACM__菜鸟之经典错误

    1:多组输入与单组输入 Input contains multiple test cases. Input contains a single test case. 2:  EOF=-1 while( ...

  6. Python3.7中urllib.urlopen 报错问题

    import urllib web = urllib.urlopen('https://www.baidu.com') f = web.read() print(f) 报错: Traceback (m ...

  7. 关于GC.Collect在不同机器上表现不一致问题

    2019.1.17,昨天项目更新后策划反应: 游戏卡,表现为:每走几步就卡一下.前天还没有. 但在我本机测试中,却没有任何卡顿感. QC同学的机器也卡.我去看了下,打开Profiler,没开deep, ...

  8. 遍历DOM树,获取子节点

    获取子节点的方法有:  方法  说明  children()  选取子节点,可以带过滤参数.但只能选择子节点,不能选择孙子节点.  find()  选取子节点,可以带过滤参数.可以选择子节点及孙子节点 ...

  9. C++ MFC 改变控件大小和位置

    用CWnd类的函数MoveWindow()或SetWindowPos()可以改变控件的大小和位置. void MoveWindow(int x,int y,int nWidth,int nHeight ...

  10. 慕容小匹夫 Unity3D移动平台动态读取外部文件全解析

    Unity3D移动平台动态读取外部文件全解析   c#语言规范 阅读目录 前言: 假如我想在editor里动态读取文件 移动平台的资源路径问题 移动平台读取外部文件的方法 补充: 回到目录 前言: 一 ...