父子页面(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 ...
随机推荐
- MSBuild是什么?
MSBuild入门 MSBuild是什么? MSBuild全称(Microsoft Build Engine),是用来生成.NET程序的平台.您可能不知道它,但是如果您在使用VS做开发,那么一定时时刻 ...
- hdu1198--并查集
Problem Description Benny has a spacious farm land to irrigate. The farm land is a rectangle, and is ...
- linux 网络编程:客户端与服务器通过TCP协议相互通信 + UDP
1.TCP编程的客户端一般步骤: 1.创建一个socket,用函数socket(): 2.设置socket属性,用函数setsockopt():* 可选: 3.绑定IP地址.端口等信息到socket上 ...
- QT 初试 MainWindow简易窗体
1.创建一个空的QT工程文件 2 建立程序文件 MainWindow.h #ifndef MAINWINDOW_H #define MAINWINDOW_H #include<QMainWind ...
- javaPNS进阶-高级推送技巧
1 创建 payloads javaPNS提供了很多简单易用的通知方式(Push类里的alert,badges,sounds等)这些让你不用自己处理payload.但是我们的程序可能需要复杂的推送信息 ...
- 最近修bug的一点感悟
写在前面话 项目从13年1月份,现场开发,4月中旬,项目开发接近尾声,三个开发,留两个在现场,我被调回公司,5月份现场一同事离职,只有一个同事在开发,结果PM想让这一个同事承担余下的开发和bug工作, ...
- JAVA的abstract修饰符 && 接口interface用法 && 抽象类和interface的差别
abstract修饰符可以修饰类和方法. (1)abstract修饰类,会使这个类成为一个抽象类,这个类将不能生成对象实例,但可以做为对象变量声明的类型(见后面实例),也就是编译时类型.抽象类就相当于 ...
- idea远程调试linux下的tomcat
要远程调试代码,首先的保障本地的代码和远程tomcat的代码是同一份 首先在本地idea配置一个远程tomcat服务器 host就填写远程主机ip port填写访问的端口(不是调试端口) 然后在Sta ...
- tabindex属性
1. tabindex的用法: 可以设置tab键在控件中的移动顺序. 以下元素支持tabindex属性:<a> <input> <textarea> <are ...
- Unity Get Thread Content Failed
最近在使用Unity做项目时,发现总是莫名的出现“Get Thread Content Failed”的消息弹出,然后Unity就卡死了,这样反反复复,后来查到是因为一些杀毒软件在阻止Unity,尝试 ...