父子页面(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 ...
随机推荐
- .NET:国际化和本地化
.NET:国际化和本地化 背景 国际化(i18n)和本地化(l10n)是高端程序的必备技术,可惜从业五年从没有尝试过,下一步准备做一个多用户的博客系统,想支持多语言,今天就学习了一下,写出来,希望大家 ...
- Android监听WebView滑动到底部
MainActivity如下: package cn.testwebview; import android.app.Activity; import android.graphics.Bitmap; ...
- ClassLoader的类结构分析
摘自深入分析java web技术内幕
- 两行代码实现微信小程序联系人sidebar
话不多说,先给你们看看核心数据和结构: 一.数据: city的json array,letter的array (city的json array里的首字母是我手工放置进去的,你也可以通过for循环获得c ...
- 使用HttpWebRequest模拟登陆阿里巴巴(alibaba、httpwebrequest、login)
前言 其实老喜欢取经,偶尔也得分享下.关于阿里巴巴国际站的登陆,过程有点复杂但是算不上难.一不小心少个东西倒也挺麻烦的. 主要是看下请求类HttpClient基本请求封装使用,AliClient模拟浏 ...
- [.net] c# webservice
采用的工具VS2010生成工程 1. 生成webservice工程:建 ASP.NET 空WEB 应用程序. 2. 在建好的ASP.NET 空WEB应用程序中新建项“web 服务”. 完成上述内容工程 ...
- java基础IO删除文件夹文件
/** * 定义一个方法,能够删除任意文件夹,文件夹路径由键盘录入 注意:不要在C盘下做测试,请选定无用的文件夹测试! */ 1.键盘录入 private static File getfile() ...
- Python高手之路【十三】socket网络编程
什么是客户/服务器架构? 什么是客户/服务器架构?不同的人有不同的答案.这要看你问的是什么人,以及指的是软件系统还是硬件系统了.但是,有一点是共通的:服务器是一个软件或硬件,用于提供客户需要的&quo ...
- HTML <dl> 标签
<html><body><h2>一个定义列表:</h2><dl> <dt>计算机</dt> <dd&g ...
- 将前台input中的数据异步传到后台并存入数据库
将前台input中的数据异步传到后台并存入数据库 先看图: 利用ajax异步交互数据,并不是以json数组的形式将数据传到后台,而是利用字符数组的形式将其传到后台.动态新增每一行数据,将每一列对应的数 ...