父子页面(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 ...
随机推荐
- 构建一个真实的应用电子商务SportsStore(十)
构建一个真实的应用电子商务SportsStore(十) 我们现在还需要为管理员提供一个途径,使他能方便的管理网站的商品目录,这也是所有网站都需要的功能,常用到了几乎所有开发人员都要开发这种功能的地步, ...
- JavaScript设置简单的自动时间
下面就是一段简单的JavaScript设置简单的自动时间,时间显示在一个输入框input里面. <html> <head> </head> <body> ...
- Android消息推送之GCM方式(一)
<声明> 转载请保留本来源地址: http://blog.csdn.net/wzg_1987/article/details/9140371 首先,你需要使用一个谷歌账号登录谷歌Api控制 ...
- 对 Select 的各种操作(JQuery)
在写表单时,经常要用到select元素,这个元素相较于其他文本框标签而言有不同.最近在写一个页面表单时需要对select进行各种操作,现将其用法收集并总结如下: HTML元素: <select ...
- C语言之带有返回值的函数
带有返回值的函数 语法: 类型 函数名(参数列表){ 函数体; return 数据; } 例: int getSum(int num1,int num2){ int sum = num1 + num2 ...
- LaTeX入门教程(二)
LaTeX(LATEX,音译"拉泰赫")是一种基于ΤΕΧ的排版系统,由美国计算机学家莱斯利·兰伯特(Leslie Lamport)在20世纪80年代初期开发,利用这种格式,即使使用 ...
- “System.FormatException”类型的异常在 mscorlib.dll 中发生,但未在用户代码中进行处理 其他信息: 该字符串未被识别为有效的 DateTime。
前台用过jquery ajax将值传递到 后台的一般处理程序 并且报了这个异常 原因是:前台传递过来的时间格式不对 需要把 "/"换成 "-" 例如:20 ...
- 首页导航点击A连接跳转并添加上背景色,
<style> ul li { float: left; height: 50px; width: 120px; color: white; text-align: center; mar ...
- vue+vuex初入门
Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 解决问题: 传参的方法对于多层嵌 ...
- BitMap - leetcode [位运算]
136. Single Number 因为A XOR A = 0,且XOR运算是可交换的,于是,对于实例{2,1,4,5,2,4,1}就会有这样的结果: (2^1^4^5^2^4^1) => ( ...