父子页面(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 ...
随机推荐
- python cookbook学习笔记 第一章 文本(1)
1.1每次处理一个字符(即每次处理一个字符的方式处理字符串) print list('theString') #方法一,转列表 结果:['t', 'h', 'e', 'S', 't', 'r', 'i ...
- Haskell 笔记(四)函数系统
函数系统 函数式编程当然少不了函数系统啦,在教程最初的时候就有一个最简单的函数,函数系统贯穿在Haskell全部,Haskell的函数有几个重要的性质. 首先声明一下函数的参数和返回值类型 然后有一个 ...
- 使用 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 ...
- 【转载】Servlet Filter(过滤器)、Filter是如何实现拦截的、Filter开发入门
Servlet Filter(过滤器).Filter是如何实现拦截的.Filter开发入门 Filter简介 Filter也称之为过滤器,它是Servlet技术中最激动人心的技术,WEB开发人员通过F ...
- JPA实现分页
JPA实现分页 Jpa自己已经有了实现分页的基本查询方法,只要自己在网上找一个分页的前端插件,然后再用Jpa查询到数据给它. 页面传当前页和每一页的大小给后台,后台就像下面这样处理: public L ...
- 部署 instance 到 OVS vlan100 - 每天5分钟玩转 OpenStack(138)
上一节创建了 OVS vlan network vlan100,今天部署 instance 到该网络.launch 新的 instance “cirros-vm1”,网络选择 vlan100. cir ...
- Swift之父Chris Lattner将从Apple离职,加入特斯拉
1月10日,Swift编程语言之父 Chris Lattner 在 swift-evolution 邮件列表中宣布,他将于本月底离开 Apple,Ted Kremenek 将接替他成为 Swi ...
- java基础练习 7
public class Seventh { public static void main(String[] args){ double x=0,a=1,b=9; while(x!=a*a-100& ...
- 二、spark入门之spark shell:文本中发现5个最常用的word
scala> val textFile = sc.textFile("/Users/admin/spark-1.5.1-bin-hadoop2.4/README.md") s ...
- 舒适的路线 (code[vs] 1001)
传送门 :code[vs] 1001 思路:拿到这题的首先的思路 , 就是跑一遍最短路. 可是在尝试了一会后发现不会写,于是果断弃 尝试另外的算法.. 于是就有的以下的算法.并查集 + 乱搞(有点像 ...