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

　　父窗口：

 <!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. 使用Design包实现QQ动画侧滑效果和滑动菜单导航

    Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的Android Design Support Library,在这个supp ...

  2. 【转载】C#怎么判断字符是不是汉字

    支持并尊重原创!原文地址:http://jingyan.baidu.com/article/2c8c281deb79ed0008252af1.html 判断一个字符是不是汉字通常有三种方法,第1种用 ...

  3. python学习笔记1：python入门

    关于版本的选择 按照网上的说法,如果python是为了在工作中使用,选择2.7版本的.这里我选择2.7.9版本的来进行学习: Python是什么? 是一种高级的计算机程序设计语言.应用范围比较广,go ...

  4. PHP基础知识第一趴

    今天来贴一贴我的一张部分php基础知识的思维导图.未完,待续......慢慢'补枪'(为了让引号内的期望输出内容<strong>变成</strong>现实,应该使用双引号?那就 ...

  5. 微信小程序注册

    小程序是一种新的开放能力,可以在微信内被便捷地获取和传播,同时具有出色的使用体验.开发者可以根据平台提供的能力,快速地开发一个小程序. 开放内容包括: 1.开放注册范围:企业.政府.媒体.其他组织: ...

  6. 【原】Go语言及Web框架Beego环境无脑搭建

    本文涉及软件均以截至到2013年10月12日的最新版本为准 1. 相关软件准备: 1) go1.2rc1.windows-386.msi,对应32位windows系统安装使用 下载地址: https: ...

  7. 用canvas绘制折线图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. ES6之解构赋值

    截止到ES6,共有6种声明变量的方法,分别是var .function以及新增的let.const.import和class: 我们通常的赋值方法是: var foo='foo'; function ...

  9. JavaScript图表FusionCharts免费在线公开课，由印度原厂技术工程师主讲，10月13日发车

    FusionCharts公开课达人还你做 轻松晋升图表大师 [开课时间]10月13日 14:30[主讲老师]印度原厂技术工程师[开课形式]网络在线公开课[活动费用]前50名免费 现在就可以报名哦  报 ...

  10. IT菜鸟的生存指南（二）新手村任务

    此文献给那些刚误入IT行业的小菜鸟们,此文无法教你如何"当上CEO,迎娶白富美",那是电视剧情.现实IT行业里危机重重,竞争激励.这里教你的是如何生存.生存.生存- 恭(不)喜(幸 ...