现在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元素的更多相关文章

  1. JS获取HTML DOM元素的方法

    JS获取HTML DOM元素有八种方法: 1.根据id获取标签元素: document.getElementById("id名"); 2.根据标签名获取标签列表: document ...

  2. iframe父子页面之间相互调用元素和函数

    <!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. JS获取HTML DOM元素的8种方法

    什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 ...

  4. 关于jq的load不用回调获取其中dom元素方法

    jq的load方法如果要操作其中的dom元素,需要使用回调,等其加载完了再进行dom元素的获取,今天看我们项目组长写的一段代码,发现不用回调也能获取到其中的元素. 具体是这样写的: <scrip ...

  5. 获取或操作DOM元素特性的几种方式

    1. 通过元素的属性 可以直接通过元素属性获取或操作特性,但是只有公认的特性(非自定义的特性),例如id.title.style.align.className等,注意,因为在ECMAScript中, ...

  6. 原生JS获取HTML DOM元素的8种方法

    JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...

  7. 原生写一个一键获取所有DOM元素的方法

    一天挺一个朋友去面试要做一个获取dom元素到数组中 主要用到一个递归算法,通过节点的childNodes属性--代码如下: function getAllNode() { var nodes = do ...

  8. VUE中v-on:click事件中获取当前dom元素

    在开发中总是忘记, 特意在此记录 关键字:   $event     <div class="bed" v-on:click="updateBed(index,$e ...

  9. 原生js获取 一个dom元素距离页面可视区域的位置值 -- getBoundingClientRect

    getBoundingClientRect() 这个方法返回一个矩形对象,包含四个属性:left.top.right和bottom.分别表示元素各边与页面上边和左边的距离. var box=docum ...

随机推荐

  1. python cookbook学习笔记 第一章 文本(1)

    1.1每次处理一个字符(即每次处理一个字符的方式处理字符串) print list('theString') #方法一,转列表 结果:['t', 'h', 'e', 'S', 't', 'r', 'i ...

  2. Haskell 笔记(四)函数系统

    函数系统 函数式编程当然少不了函数系统啦,在教程最初的时候就有一个最简单的函数,函数系统贯穿在Haskell全部,Haskell的函数有几个重要的性质. 首先声明一下函数的参数和返回值类型 然后有一个 ...

  3. 使用 IDEA 创建 Maven Web 项目 (异常)- Disconnected from the target VM, address: '127.0.0.1:59770', transport: 'socket'

    运行环境: JDK 版本:1.8 Maven 版本:apache-maven-3.3.3 IDEA 版本:14 maven-jetty-plugin 配置: <plugin> <gr ...

  4. 【转载】Servlet Filter(过滤器)、Filter是如何实现拦截的、Filter开发入门

    Servlet Filter(过滤器).Filter是如何实现拦截的.Filter开发入门 Filter简介 Filter也称之为过滤器,它是Servlet技术中最激动人心的技术,WEB开发人员通过F ...

  5. JPA实现分页

    JPA实现分页 Jpa自己已经有了实现分页的基本查询方法,只要自己在网上找一个分页的前端插件,然后再用Jpa查询到数据给它. 页面传当前页和每一页的大小给后台,后台就像下面这样处理: public L ...

  6. 部署 instance 到 OVS vlan100 - 每天5分钟玩转 OpenStack(138)

    上一节创建了 OVS vlan network vlan100,今天部署 instance 到该网络.launch 新的 instance “cirros-vm1”,网络选择 vlan100. cir ...

  7. Swift之父Chris Lattner将从Apple离职,加入特斯拉

        1月10日,Swift编程语言之父 Chris Lattner 在 swift-evolution 邮件列表中宣布,他将于本月底离开 Apple,Ted Kremenek 将接替他成为 Swi ...

  8. java基础练习 7

    public class Seventh { public static void main(String[] args){ double x=0,a=1,b=9; while(x!=a*a-100& ...

  9. 二、spark入门之spark shell:文本中发现5个最常用的word

    scala> val textFile = sc.textFile("/Users/admin/spark-1.5.1-bin-hadoop2.4/README.md") s ...

  10. 舒适的路线 (code[vs] 1001)

    传送门 :code[vs]  1001 思路:拿到这题的首先的思路 , 就是跑一遍最短路. 可是在尝试了一会后发现不会写,于是果断弃 尝试另外的算法.. 于是就有的以下的算法.并查集 + 乱搞(有点像 ...