文档章节

js窗体中包含多个窗口,父窗口获取子窗口,子窗口获取父窗口

郑玉燕
 郑玉燕
发布于 2015/01/29 17:42
字数 337
阅读 33
收藏 0

今天看书看到了窗体之间的关系,从中包括了父窗口中包含多个子窗口的获取,下面我就记录一下,防止忘记。 代码如下: 便于测试将新建两个html文件,其中一个为父窗口main.html,另一个为子窗口child.html

 

main.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<iframe src="wenzi.html" id="f1"></iframe>
<div id="parentId">我是父窗口</div>
</body>
</html>
<script type="text/javascript">
window.onload = function (){
//父窗口获取子窗口有两种方法, 
//第一种方法是:每个<iframe>都有一个contentWindow属性, 通过contentWindow可获取子窗口; 
//第二种方法是:window对象有frames属性,它是一个类数组对象,可以通过数字或窗体名进行索引
//var childFrame = document.getElementById('f1').contentWindow;
var childFrame = window.frames[0];
alert('父窗口获取子窗口弹出: '+ childFrame.document.getElementById('test').innerHTML)
}
</script>

child.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<div id="test" name="childDIV">我是子窗口</div>
</body>
</html>
<script type="text/javascript">
var p = window.parent;
alert('子窗口获取父窗口弹出:' + p.document.getElementById('parentId').innerHTML)

</script>

其中谷歌浏览器必须在服务器中运行才能看到效果。

如果看客有什么疑问可以共同探讨,本人QQ:314186096

© 著作权归作者所有

郑玉燕
粉丝 0
博文 3
码字总数 1339
作品 0
海淀
私信 提问
附实例!实现iframe父窗体与子窗体的通信

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由前端林子发表于云+社区专栏 本文主要会介绍如何基于MessengerJS,实现iframe父窗体与子窗体间的通信,传递数据信息。同时本...

腾讯云加社区
2018/11/16
0
0
jquery获取父窗口的元素

jquery获取父窗口的元素 取父窗口的元素方法:$(selector, window.parent.document);取父窗口的元素方法:$(selector, parent.document);那么你取父窗口的父窗口的元素就可以用:$(selector,...

壹峰
2016/12/06
0
0
jquery 获取父窗口的元素 父窗口 子窗口

$("#父窗口元素ID",window.parent.document); 对应javascript版本为window.parent.document.getElementByIdx_x("父窗口元素ID"); 取父窗口的元素方法:$(selector, window.parent.document)......

孙斐
2011/09/29
0
1
iframe多层嵌套时获取元素总结

父页面获取子页面元素: 注意:onload事件 jQuery获取: $("iframe").contents().find("holder")......; (嵌套三层,或者更多时) $('iframe').contents().find('iframe').contents().find(......

sjzmlb
2015/06/30
0
0
父页面与子页面之间调用时通过JS传值

父页面与子页面之间调用时通过JS传值 之所以查找的这篇文章 是因为自己当时的思路是走不通的。。。 page1 里面 有一个button <input type="button" class="button" onclick="doMassRejection......

狮子暴走
2014/02/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Java 判断实体类属性是否为空工具类

import org.apache.commons.lang.StringUtils;import java.lang.reflect.Field;import java.lang.reflect.Method;/** * 判断对象是否为空 * @param obj * @return */pub......

骑羊放狼灬
25分钟前
1
0
基于nginx搭建RTMP服务器

安装nginx 下载ngnix源码 git clone https://github.com/nginx/nginx.gitgit clone https://github.com/arut/nginx-rtmp-module.git 编译安装 ./configure --add-module=../nginx-rtmp-mod......

cloudjx
38分钟前
1
0
从 Spark 到 Kubernetes — MaxCompute 的云原生开源生态实践之路

2019年5月14日,喜提浙江省科学技术进步一等奖的 MaxCompute 是阿里巴巴自研的 EB 级大数据计算平台。该平台依托阿里云飞天基础架构,是阿里巴巴在10年前做飞天系统的三大件之分布式计算部分...

迷你芊宝宝
41分钟前
1
0
5个Vue.js项目的模板

开发人员查看使用SPA,Webpack,身份验证,GraphQL,文档和测试的Vue开发人员的资源。 你准备开始一个重要的Vue项目吗?为了确保从坚实的基础开始,您可以使用模板(也就是样板,骨架,起动器...

写字的男孩儿
42分钟前
1
0
epoll 的本质是什么?

从事服务端开发,少不了要接触网络编程。epoll 作为 Linux 下高性能网络服务器的必备技术至关重要,nginx、Redis、Skynet 和大部分游戏服务器都使用到这一多路复用技术。 epoll 很重要,但是...

编辑部的故事
45分钟前
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部