父子页面(iframe)相互获取对方dom元素
现在iframe的使用虽然开始越来越少,但是还是有牵涉到iframe的使用情况,特别是多个iframe互相嵌套,又要进行获取的情况。
现在整理了父子iframe之间互相获取的方式。
(1)父页面获取子页面的方式。
主要通过:
iframe的contentWindow属性,代表iframe所在的window对象。
示例如下:
<script type="text/javascript">
window.onload = function(){
var cWindow = document.getElementById('iframeId').contentWindow;
var div=cWindow .document.getElementById('divId');
//some other operation
} </script> .... <iframe id="iframeId" src="iframe.html" width="100" height="100">
<div id="divId"></div>
</iframe>
(2) 通过子元素获取父元素
主要通过 window.parent 进行获取
示例代码如下:
<div id-"pDivId"></div>
<iframe src="iframe.html" width="100" height="100"> </iframe>
iframe.html页面中的内容为(实现对父元素的操作):
<script type="text/javascript">
window.onload = function(){
var pWindow= window.parent;
var pDiv=pWindow.document.getElementById('pDivId');
//some other operation
}
</script>
父子页面(iframe)相互获取对方dom元素的更多相关文章
- JS获取HTML DOM元素的方法
JS获取HTML DOM元素有八种方法: 1.根据id获取标签元素: document.getElementById("id名"); 2.根据标签名获取标签列表: document ...
- iframe父子页面之间相互调用元素和函数
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...
- JS获取HTML DOM元素的8种方法
什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 ...
- 关于jq的load不用回调获取其中dom元素方法
jq的load方法如果要操作其中的dom元素,需要使用回调,等其加载完了再进行dom元素的获取,今天看我们项目组长写的一段代码,发现不用回调也能获取到其中的元素. 具体是这样写的: <scrip ...
- 获取或操作DOM元素特性的几种方式
1. 通过元素的属性 可以直接通过元素属性获取或操作特性,但是只有公认的特性(非自定义的特性),例如id.title.style.align.className等,注意,因为在ECMAScript中, ...
- 原生JS获取HTML DOM元素的8种方法
JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...
- 原生写一个一键获取所有DOM元素的方法
一天挺一个朋友去面试要做一个获取dom元素到数组中 主要用到一个递归算法,通过节点的childNodes属性--代码如下: function getAllNode() { var nodes = do ...
- VUE中v-on:click事件中获取当前dom元素
在开发中总是忘记, 特意在此记录 关键字: $event <div class="bed" v-on:click="updateBed(index,$e ...
- 原生js获取 一个dom元素距离页面可视区域的位置值 -- getBoundingClientRect
getBoundingClientRect() 这个方法返回一个矩形对象,包含四个属性:left.top.right和bottom.分别表示元素各边与页面上边和左边的距离. var box=docum ...
随机推荐
- 安装linux版qq,安装二进制包编译器,安装mysql-5.6.11,删除已安装或安装失败的mysql-5.6.11,简单mysql练习题
上午[root@localhost ~]# ./test3.sh dev1^C[root@localhost ~]# groupadd dev1[root@localhost ~]# vim /etc ...
- django admin.py settings 操作
dango, 怎么说呢,什么东西都内置了,什么东西都是自己的东西.用过flask, cherrypy, web.py, pyramid 等等python 框架后,再选用dango 觉得,理念有很大的区 ...
- Dom4j下载及使用Dom4j读写XML简介
sitinspring(如坐春风)原创,转载请注明作者及出处. 要使用dom4j读写XML文档,需要先下载dom4j包,dom4j官方网站在 http://www.dom4j.org/目前最新dom4 ...
- ssm框架中css被拦截
最近用springmvc spring mybatis框架写程序,请求成功并获得数据,唯独css样式不能加载,但路径正确,css文件编码也是utf-8,用火狐debug总是显示未请求到(都快怀疑自己写 ...
- JAVA 代码开发规范
一.开发工具规范: 1. 开发工具经项目负责人调试后统一确定. 2. 开发工具一经确定不允许集成任何非统一插件,若有需要,经项目负责人同意后统一为 项目组成员添加. 3. 开发工具的编码格式不允许修改 ...
- Atitti 图像处理 特征提取的科技树 attilax总结
Atitti 图像处理 特征提取的科技树 attilax总结 理论 数学,信号处理,图像,计算机视觉 图像处理 滤波 图像处理 颜色转换 图像处理 压缩编码 图像处理 增强 图像处理 去模糊 图像处理 ...
- 360回归A股,周鸿祎来给BAT和小米添堵了
排着队回国内上市的公司名单里,终于多了奇虎360的名字. 奇虎360今天宣布,公司董事会收到了来自董事长周鸿祎.中信证券及其附属公司.Golden Brick Capital Private Equi ...
- eclipse集成配置JDK和Tomcat
在eclipse中集成JDK和tomcat服务器方法很简单,我们可以在服务器上运行想要的东西.比如我们学习javaweb时就要用到. 工具/原料 eclipse,JDK,tomcat 方法/步骤 ...
- ORA-12516 TNS监听程序找不到符合协议堆栈要求的可用处理程序
服务器上某个数据库出现' ORA-12516: TNS: 监听程序找不到符合协议堆栈要求的可用处理程'错误,要解决该问题首先查看一下数据库现有的进程数,是否已经达到参数processes的大小. 使用 ...
- less基本语法
1.新建less文件 xx.less 和css文件存放在一起 2. 在less文件里声明编码格式 @charset "utf-8"; 3.把项目拖入Koala里 4.选中less文 ...