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

　　父窗口：

 <!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. 学习JVM--垃圾回收（一）原理

    1. 前言 Java和C++之间显著的一个区别就是对内存的管理.和C++把内存管理的权利赋予给开发人员的方式不同,Java拥有一套自动的内存回收系统(Garbage Collection,GC)简称G ...

  2. Vertica删除历史分区数据

    假设test用户下创建的t_jingyu表 vsql -Utest -wtestpwd create table t_jingyu( col1 int, col2 varchar, col3 time ...

  3. [原创]django+ldap实现单点登录(装饰器和缓存)

    前言 参考本系列之前的文章,我们已经搭建了ldap并且可以通过django来操作ldap了,剩下的就是下游系统的接入了,现在的应用场景,我是分了2个层次,第一层次是统一认证,保证各个系统通过ldap来 ...

  4. C# - 多线程 之 异步编程

    异步编程 同步编程,请求响应模型,同步化.顺序化.事务化. 异步编程,事件驱动模型,以 Fire and Forget 方式实现. 异步编程模式  -§- 异步编程模型 (APM) 模式: IAsyn ...

  5. C++ map的基本操作和使用

    原文地址:http://blog.sina.com.cn/s/blog_61533c9b0100fa7w.html Map是c++的一个标准容器,她提供了很好一对一的关系,在一些程序中建立一个map可 ...

  6. 如何实现一个php框架系列文章【3】支持psr4的自动加载类

    psr4自动加载规范https://github.com/PizzaLiu/PHP-FIG/blob/master/PSR-4-autoloader-cn.md 我们把第三方使用psr规范的类库放在v ...

  7. 物联网框架SuperIO 2.2.9和ServerSuperIO 2.1同时更新，更适用于类似西门子s7-200发送多次数据，才能读取数据的情况

    一.解决方案 二.更新内容 1.修改IRunDevice接口,把void Send(io,bytes)改成int Send(io,bytes).2.修改网络控制器,发送数据不直接使用IO实例,改为使用 ...

  8. 每天一个设计模式-4 单例模式（Singleton）

    每天一个设计模式-4 单例模式(Singleton) 1.实际生活的例子 有一天,你的自行车的某个螺丝钉松了,修车铺离你家比较远,而附近的五金店有卖扳手:因此,你决定去五金店买一个扳手,自己把螺丝钉固 ...

  9. 遍历datatable的方法汇总

    遍历datatable的方法方法一: DataTable dt = dataSet.Tables[]; ; i < dt.Rows.Count ; i++) { string strName = ...

  10. 使用 Vue 2.0 实现服务端渲染的 HackerNews

    Vue 2.0 支持服务端渲染 (SSR),并且是流式的,可以做组件级的缓存,这使得极速渲染成为可能.同时, 和 2.0 也都能够配合 SSR 提供同构路由和客户端 state hydration.v ...