在做一个父窗口开启子窗口并且在子窗口关闭的时候调用父窗口的方法，达到局部刷新的目的。

　　父窗口：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns=" http://www.w3.org/1999/xhtml">

 <head>

   <title>parent</title>

   <script type="text/javascript">

     var parentPara='parent';

     function parentFunction() {

       alert(parentPara);

     }

   </script>

 </head>

 <body>

   <button onclick="parentFunction()">显示变量值</button>

   <button onclick="window.open('child.html')">打开新窗口</button>

 </body>

 </html>

　　子窗口：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns=" http://www.w3.org/1999/xhtml">

 <head>

   <title>child</title>

   <script type="text/javascript">

     function modify() {

       opener.parentPara='child';

     }

   </script>

 </head>

 <body>

   <button onclick="opener.parentFunction()">调用父页面的方法</button>

   <button onclick="modify()">更改父页面中变量的值</button>

 </body>

 </html>

　　子页面是父页面的一个iframe

　　父页面：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns=" http://www.w3.org/1999/xhtml">

 <head>

   <title>parent</title>

   <script type="text/javascript">

     function fill() {

       //alert(frame1.window.childPara);  //显示frame1内的变量值

       var str=document.getElementById('txt1').value; //获得文本框内输入的值

       frame1.window.div1.innerHTML=str; //将值填入子页面的一个div中

     }

   </script>

 </head>

 <body>

   <div style="background-color:yellow;width:300px;height:300px;">

     父页面

     <iframe id="frame1" src="child.html" frameborder="0" scrolling="no" width="120px" height="120px"></iframe>

     <br/><br/><br/><br/>

     <input id="txt1" type="text"/>

     <button onclick="fill()">将文本框内值填充入子界面</button>

   </div>

 </body>

 </html>

　　子页面：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns=" http://www.w3.org/1999/xhtml">

 <head>

   <title>child</title>

   <script type="text/javascript">

     function fun() {

       parent.fill();

     }

   </script>

 </head>

 <body>

   <div style="background-color:lightblue;width:100px;height:100px;">

     <b>子页面</b><br/>

     <a href="#" onclick="fun()">同父页面按钮</a>

     <div id="div1" style="color:red;">

     </div>

   </div>

 </body>

 </html>

　　刷新父页面时，其中的iframe也会随之刷新；刷新iframe时，父页面不会刷新。

　　另外，如果是在angularJS中的一个模块调用另一个模块的方法：主要思路是获取另一模块的angular和document，然后用angular.element(document.getElementById("aaa"));

其中：var angular = window.opener.angular;var document = window.opener.document;具体情况视实际情况在获取。

JavaScript子窗口调用父窗口变量和函数的方法的更多相关文章

  1. winform子窗口调用父窗口的控件及方法-一般调用

    首先新建一个窗体应用程序,在项目属性中点击右键->添加->添加新项,选择Windows窗体->添加. 在Form1和Form2窗口中各添加一个按钮,并双击添加事件处理函数:     ...

  2. Qt 代码： 子窗口调用父窗口（其实就是用指针直接访问）

    之前的 Qt 编程大多只涉及简单的多窗口,并未染指窗口间的传值交互,想来还是“涉世未深”,对 Qt 的理解.应用还需殷勤努力. 这次的问题是这样的,我想要实现一个类似QQ.阿里旺旺的聊天客户端,在弹出 ...

  3. js中子窗口调用父窗口中的变量、函数

  4. window.open子窗口获取父窗口的值

    //子窗口获取父窗口id的值 window.opener.document.getElementById("id").value; //子窗口调用父窗口的函数 window.ope ...

  5. iframe里面的页面调用父窗口,左右窗口js函数的方法

      iframe里面的页面调用父窗口,左右窗口js函数的方法 实现iframe内部页面直接调用该iframe所属父窗口自定义函数的方法. 比如有A窗口,A内有个IFRAME B,B里面的装载的是C页面 ...

  6. JS 在open打开的子窗口页面中调用父窗口页面的JS方法

    需求的情景如下: 1:做新增或修改等操作的时候打开一个新的浏览器窗口(使用window.open(参数等)方法) 2:在新增或修改等的页面上有返回按钮.重置按钮.保存按钮,对于返回就直接关闭此窗口(使 ...

  7. JavaScript窗口打开与关闭及如何使用opener使子窗口对父窗口进行操作

    一.打开与关闭窗口 1.打开窗口:可以使用window对象中的Open()方法. newWindow = window.open(url,windowname,location); 参数说明: url ...

  8. 转-JS子窗口创建父窗口操作父窗口

    Javascript弹出子窗口  可以通过多种方式实现,下面介绍几种方法 (1) 通过window对象的open()方法,open()方法将会产生一个新的window窗口对象 其用法为: window ...

  9. MFC子窗口和父窗口

    转载声明: 本文转载自:http://www.cnblogs.com/BeyondTechnology/archive/2011/03/25/1995934.html 感谢BeyondTechnolo ...

随机推荐

  1. 应用层之E-mail服务及javaMail邮件发送的知识总结

    关于Email服务你需要知道的知识点: 概述: 今天来介绍一下应用层的电子邮件服务,我们每天几乎都在用,电子邮件(email)服务也是一种基于C/S模式的服务,它采用的是一种"存储-转发&q ...

  2. GIS部分理论知识备忘随笔

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.高斯克吕格投影带换算 某坐标的经度为112度,其投影的6度带和3度带 ...

  3. docker对数据卷进行还原操作

    转载请注明出处 数据卷容器备份数据后,备份数据查看 http://www.cnblogs.com/zhuxiaojie/p/5947138.html   我们可能要把这个备份的数据,还原到另一台的do ...

  4. [Spring]支持注解的Spring调度器

    概述 如果想在Spring中使用任务调度功能,除了集成调度框架Quartz这种方式,也可以使用Spring自己的调度任务框架. 使用Spring的调度框架,优点是:支持注解(@Scheduler),可 ...

  5. C#写文本日志帮助类(支持多线程)改进版(不适用于ASP.NET程序)

    由于iis的自动回收机制,不适用于ASP.NET程序 代码: using System; using System.Collections.Concurrent; using System.Confi ...

  6. 【无私分享：ASP.NET CORE 项目实战（第五章）】Repository仓储 UnitofWork

    目录索引 [无私分享:ASP.NET CORE 项目实战]目录索引 简介 本章我们来创建仓储类Repository 并且引入 UnitOfWork 我对UnitOfWork的一些理解  UnitOfW ...

  7. JavaWeb_day03_员工信息添加修改删除

    day03员工的添加,修改,删除 修改功能 思路 : 点击修改员工数据之后,跳转到单行文本,查询要修改的员工id的全部信息,主键id设置为readonly,其余的都可以修改, 修改之后,提交按钮,提交 ...

  8. openresty 前端开发入门二

    这一章主要介绍介绍怎么获取请求参数,并且处理之后返回数据 我们知道http请求通常分为两种,分别是GET,POST,在http协议中,GET参数通常会紧跟在uri后面,而POST请求参数则包含在请求体 ...

  9. GJM : 常用网站收集 【不断更新中... ... ... 】

    感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...

  10. JQuery操作类数组的工具方法

    JQuery学习之操作类数组的工具方法 在很多时候,JQuery的$()函数都返回一个类似数据的JQuery对象,例如$('div')将返回div里面的所有div元素包装的JQuery对象.在这中情况 ...