JavaScript子窗口调用父窗口变量和函数的方法
在做一个父窗口开启子窗口并且在子窗口关闭的时候调用父窗口的方法，达到局部刷新的目的。
父窗口：
<!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子窗口调用父窗口变量和函数的方法的更多相关文章
- winform子窗口调用父窗口的控件及方法-一般调用
首先新建一个窗体应用程序,在项目属性中点击右键->添加->添加新项,选择Windows窗体->添加. 在Form1和Form2窗口中各添加一个按钮,并双击添加事件处理函数: ...
- Qt 代码： 子窗口调用父窗口（其实就是用指针直接访问）
之前的 Qt 编程大多只涉及简单的多窗口,并未染指窗口间的传值交互,想来还是“涉世未深”,对 Qt 的理解.应用还需殷勤努力. 这次的问题是这样的,我想要实现一个类似QQ.阿里旺旺的聊天客户端,在弹出 ...
- js中子窗口调用父窗口中的变量、函数
- window.open子窗口获取父窗口的值
//子窗口获取父窗口id的值 window.opener.document.getElementById("id").value; //子窗口调用父窗口的函数 window.ope ...
- iframe里面的页面调用父窗口,左右窗口js函数的方法
iframe里面的页面调用父窗口,左右窗口js函数的方法 实现iframe内部页面直接调用该iframe所属父窗口自定义函数的方法. 比如有A窗口,A内有个IFRAME B,B里面的装载的是C页面 ...
- JS 在open打开的子窗口页面中调用父窗口页面的JS方法
需求的情景如下: 1:做新增或修改等操作的时候打开一个新的浏览器窗口(使用window.open(参数等)方法) 2:在新增或修改等的页面上有返回按钮.重置按钮.保存按钮,对于返回就直接关闭此窗口(使 ...
- JavaScript窗口打开与关闭及如何使用opener使子窗口对父窗口进行操作
一.打开与关闭窗口 1.打开窗口:可以使用window对象中的Open()方法. newWindow = window.open(url,windowname,location); 参数说明: url ...
- 转-JS子窗口创建父窗口操作父窗口
Javascript弹出子窗口 可以通过多种方式实现,下面介绍几种方法 (1) 通过window对象的open()方法,open()方法将会产生一个新的window窗口对象 其用法为: window ...
- MFC子窗口和父窗口
转载声明: 本文转载自:http://www.cnblogs.com/BeyondTechnology/archive/2011/03/25/1995934.html 感谢BeyondTechnolo ...
随机推荐
- IDEA+weblogic部署运行项目
前段时间再服务器上为了部署一个系统,一直存在各种问题,不过过程中倒是把weblogic的部署掌握地特别熟练,下面就一些主要步骤做个记录:1.自己用的是IDEA,所以打开项目之后需要设置src/main ...
- 判断IEnumerable<T>集合中是否包含有T对象
比如,有角色集合中,只有用户创建有角色,才出现“分配”铵钮.反之,隐藏. IEnumerable有一个方法,叫Any:
- Entity Framework 教程——EF体系结构
EF体系结构 下图是一张EF体系结构的全景图,让我们单独了解各个组件的用处. EDM (Entity Data Model): EDM由3个主要部分组成,概念模块(Conceptual Model), ...
- sessionStorage 和 localStorage 、cookie
sessionStorage 和 localStorage html5中web storage包括两种储存方式:sessionStorage 和 localStorage sessionStorage ...
- PALIN - The Next Palindrome 对称的数
A positive integer is called a palindrome if its representation in the decimal system is the same wh ...
- js 压缩工具总结
随便百度一个 “js 压缩”,然后就会有各种代码压缩工具可供选择, 向来我就爱那种绚丽新颖的玩意,比如这家显示压缩比呀,或者那家可以查错呀什么的, 今天还为国民浏览器拥有鼠标手势(按住右键画个图形就有 ...
- datatables中的Options总结(2)
datatables中的Options总结(2) 五.datatable,列 columnDefs.targets 分配一个或多个列的列定义. columnDefs 设置列定义初始化属性. colum ...
- 《JS实现复制内容到剪贴板功能，可兼容所有PC浏览器，不兼容手机端》
前记:本来原生的JS是有提供一个函数来实现这个功能(window.clipboardData),但是很遗憾,这个函数仅仅支持IE和FF浏览器,所以基本用处不大.下边介绍的是一个第三方插件库(ZeroC ...
- GridView的各种属性
<GridView android:id="@+id/movie_list" android:layout_width="906dp" android:l ...
- javascript-组合模式
组合模式笔记 组合模式又称部分-整体模式,将对象组合成树形结构以表示'部分整体'的层次结构 组合模式使得用户对单个对象和组合对象的使用具有一致性 demo实例 :表单模块 要调用到前面学习到的寄生组合 ...