IFrame父页面和子页面的交互
现在在页面里面用到iframe的情况越来越少了,但有时还是避免不了,甚至这些页面之间还需要用js来做交互,那么这些页面如何操作彼此的dom呢?下面将会逐步介绍。
1.父页面操作子页面里面的dom
下面提供了四中方法来操作iframe里面的dom:
a. contentWindow: 以window对象返回iframe中的文档,所有主流浏览器都支持。
用法:
// 获取id为iframeId的子页面中的div01元素 document.getElementById('iframeId').contentWindow.document.getElementById('div01')
b. contentDocument: 以document对象返回iframe中的文档,IE8以下浏览器不支持,IE8以下可以由contentWindow替代。
用法:
// 获取id为iframeId的子页面中的div02元素 document.getElementById('iframeId').contentDocument.getElementById('div02')
c. window.frames[iframeName]: 通过iframe的name属性获取iframe的内容
用法:
// 获取name为iframeName的子页面中的div01元素 window.frames['iframeName'].document.getElementById('div01')
d. window.frames[iframeIndex]: 通过iframe在页面中的索引值获取iframe的内容
// 获取iframe索引值为0的子页面中的div01元素 window.frames[0].document.getElementById('div01')
2.子页面操作父页面里面的dom
子页面操作父页面的dom可以通过window.parent或者window.top来实现,parent代表父页面,top代表最顶级页面。
用法:
// 获取父页面中id为menu的元素,window.parent可简写为parent window.parent.document.getElementById('menu')
Ok,以上就是关于iframe父子页面之间dom操作的一些内容,如果需要进一步了解可以参考示例:
示例地址:http://wangchi.github.io/blogdemos/2015/01/js-iframe-dom/js-iframe-dom.html
源码:https://github.com/wangchi/wangchi.github.io/tree/master/blogdemos/2015/01/js-iframe-dom
IFrame父页面和子页面的交互的更多相关文章
- Iframe父页面与子页面之间的调用
原文:Iframe父页面与子页面之间的调用 Iframe父页面与子页面之间的调用 专业词语解释如下: Iframe:iframe元素是文档中的文档. window对象: 浏览器会在其打 ...
- 使用iframe父页面调用子页面和子页面调用父页面的元素与方法
在实际的项目开发中,iframe框架经常使用,主要用于引入其他的页面.下面主要介绍一下使用iframe引入其他页面后,父页面如何调用子页面的方法和元素以及子页面如何调用父页面的方法和元素. 1.父页面 ...
- JQuery操作iframe父页面与子页面的元素与方法
JQuery操作iframe父页面与子页面的元素与方法 JQUERY IFRAME 下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现. 第一.在iframe中查找父页面元 ...
- Iframe父页面与子页面之间的相互调用
iframe元素就是文档中的文档. window对象: 浏览器会在其打开一个HTML文档时创建一个对应的window对象.但是,如果一个文档定义了一个或者多个框架(即:包含一个或者多个frame或者i ...
- iframe父页面与子页面赋值
最近因为公司之前的系统用iframe,里面的高度不能自适应,导致了很多问题,今天特意拿来研究一下,从网上找了一些方法试验了一下,这里记录一下成功的方法 1.父页面获取子页面的高度,并给父页面赋值 父页 ...
- JavaScript从父页面获取子页面的值(子页面又如何访问父页面)
之前还真没做过类似的东西,,top页面获取子页面的document.. 在百度搜了下即找到这个东东,还好,能用. 主要就是使用 contentWindow方法,获取子页面的所有document,再做处 ...
- Jquery父页面和子页面的相互操作
//父页面调用子页面Add函数 $("iframe")[0].contentWindow.Add() //父页面对子页面Id为Sava的Dom元素执行一次单击操作 $(" ...
- artdialog4.1.7 中父页面给子页面传值
artdialog4.1.7中父页面给子页面传值时看了一些网友的解决方法: 在父页面声明全局变量 var returnValue=“ ”,子页面用art.dialog.opener.returnVal ...
- js里父页面与子页面的相互调用
一.在页面里用 open 打开的子页面: 1.子页面调用父页面的方法,包括子页面给父页面传值: window.opener.methodName(); window.opener.methodName ...
随机推荐
- private ,friendly,public protected四种修饰符访问权限(从idea代码提示中看出)
文件一,本类中可以访问全部: package xsf; /** * Created by liwenj on 2017/7/25. */ public class A { private int x= ...
- JSON创建键值对(key是中文或者数字)方式详解
JSON创建键值对(key是中文或者数字)方式详解 先准备好一个空的json对象 var obj = {}; 1. 最原始的方法 obj.name = 'zhangsan'; //这种方式很简单的添加 ...
- 移动端车牌识别ocr系统
移动端车牌识别ocr系统优点: 1.识别速度快:高度优化的车牌定位和识别算法,识别时间≤50毫秒(200万图片). 2.识别率:白天识别率≥99.7%:夜间识别率≥98%. 3.识别速度:单张图片识别 ...
- [ASP.NET MVC]笔记(四 UnobtruSive AJAX和客户端验证
UnobtruSive AJAX和客户端验证 ASP.NET MVC 已经默认开启非侵入试js和客户端验证,在web.config可以看到如下配置: <configuration> < ...
- tween.js的使用
前面的话 TweenJS提供了一个简单但强大的渐变界面.它支持渐变的数字对象属性&CSS样式属性,并允许链接补间动画和行动结合起来,创造出复杂的序列.本文将详细介绍tween.js的使用 概述 ...
- centos 7 && dotnet core 2.0 && nginx && supervisor
前提 系统:centos 7 目录:/home/wwwroot/www.wuball.com dotnet core 2.0 官方指引 sudo rpm --import https://packag ...
- Apache配置虚拟域名
在作php本地调试的时候,一般都要打上localhost/,如果你的项目层级关系比较多,那你的url地址就会很长. 那我们能不能用一个简短的域名去替代那些一长串无用的字符呢? 那可能有人会问如果我没有 ...
- 201521123061 《Java程序设计》第十三周学习总结
201521123061 <Java程序设计>第十三周学习总结 1. 本周学习总结 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jm ...
- 201521123007《Java程序设计》第6周学习总结
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 2. 书面作业 1. clone方法 1.1 Object ...
- 201521123047 《Java学习笔记》第二周学习总结
1. 本周学习总结 -知道并了解到浮点数的误差关系,懂得运java.math.BigDecimal来进行浮点数的精确计算 -对于"="与"=="的区分 -字符串 ...