iframe.contentWindow介绍
一、在使用iframe的页面,要操作这个iframe里面的DOM元素可以用:
contentWindow、contentDocument(测试的时候chrome浏览器,要在服务器环境下)
1、先获取iframe里面的window对象,再通过这个对象,获取到里面的DOM元素
例:
var ifr = document.getElementById('iframe'); //先获取到了iframe
ifr.contentWindow.document.getElementById('XXX'); //先通过ifr.contentWindow获取到iframe中的window对象,然后通过document.getElementById('XXX'),获取iframe中的DOM
<iframe src="a.html" id=""></iframe>
注:iframe.contentWindow这里,返回的是iframe的window对象,所以后面可以接着调用document方法,再接着调用getElementByTagName。那么就可以对iframe里面的元素进行操作了。
二、在iframe本页面,要操作这个iframe的父页面的DOM元素(即嵌套这个iframe的页面)可以用:
window.parent、window.top(这里的top是获取的顶层,即有多层嵌套iframe的时候使用)
var ifr = document.getElementByTagName('iframe');
ifr.parent.document.getElementById('XXX');
<iframe src="a.html" id=""></iframe>
三、onload事件
非IE下用法
ifr.onload = function() { //SOMETHING }
IE下,需要绑定
ifr.attachEvent('onload',function() { //something });
iframe.contentWindow介绍的更多相关文章
- iframe.contentWindow 属性:关于contentWindow和contentDocument区分
定义和用法 contentDocument 属性能够以 HTML 对象来返回 iframe 中的文档,可以通过所有标准的 DOM 方法来处理被返回的对象. 语法:frameObject.content ...
- Iframe简单介绍(一)
Iframe可以用在以下几个场景 1.典型系统结构,左侧是功能树,右侧就是一些常见table或者表单之类的.为了每一个功能,单独分离出来,采用iframe. 2.AJAX上传文件 3.加载别的网站内容 ...
- iframe跨域+
script.image.iframe的src都不受同源策略的影响.所以我们可以借助这一特点,实现跨域.如前面所介绍的JSONP跨域,以及灯标(Beacons). 该篇随笔主要阐述iframe结合一些 ...
- Iframe 在项目中的使用总结
参考:http://www.cnblogs.com/MaxIE/archive/2008/08/13/1266597.html 问题一:首先我们用iframe加载页面,第一个需要解决的问题是高度自适应 ...
- 利用location.hash+iframe跨域获取数据详解
前言 如果看懂了前文利用window.name+iframe跨域获取数据,那么此文也就很好理解了.一样都是动态插入一个iframe,然后把iframe的src指向服务端地址,而服务端同样都是输出一段j ...
- 利用window.name+iframe跨域获取数据详解
详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...
- (转)iFrame高度自适应
第一种方法:代码简单,兼容性还可以,大家可以先测试下: function SetWinHeight(obj) { var win=obj; if (document.getElementById) { ...
- iframe 自适应内容高度
在使用iframe的时候,会出现iframe不能随着内容的高度自动改变的情况,下面就介绍一种可以自适应高度的办法.<br/> <pre> <iframe id=" ...
- 解决iframe在移动端(主要iPhone)上的问题
前言 才发现已经有一段时间没有写博客了,就简单的说了最近干了啥吧.前段时间忙了杂七杂八的事情,首先弄了个个人的小程序,对的,老早就写了篇从零入手微信小程序开发,然后到前段时间才弄了个简单的个人小程序, ...
随机推荐
- Birt报表安装及制作
一.Birt报表安装 二.Birt报表设置 1. file--> new --> Project 如下图所示创建报表工程. 输入工程名称后,创建完成. 2.创建报表 创建报表 完成创建. ...
- postgresql----索引失效
什么是索引失效?如果where过滤条件设置不合理,即使索引存在,且where过滤条件中包含索引列,也会导致全表扫描,索引不起作用.什么条件下会导致索引失效呢? 1.任何计算.函数.类型转换 2.!= ...
- 让ASP.NET OutputCache使用http.sys kernel-mode cache
在默认情况下,http.sys kerne mode cache只缓存静态文件. 那我们如何让ASP.NET OutputCache直接使用http.sys kerne mode cache?这样缓存 ...
- OGG双向复制
注意:在进行如下配置之前,先在源数据库(原来的目标数据库)端添加辅助的redolog配置: 1.SQL> alter database add supplemental log dat ...
- 符合语言习惯的 Python 优雅编程技巧
Python最大的优点之一就是语法简洁,好的代码就像伪代码一样,干净.整洁.一目了然.要写出 Pythonic(优雅的.地道的.整洁的)代码,需要多看多学大牛们写的代码,github 上有很多非常优秀 ...
- DZNEmptyDataSet 使用
gitHub地址:https://github.com/dzenbot/DZNEmptyDataSet 效果图: 代码: #import "UIScrollView+EmptyDataSet ...
- blockchain 区块链的开发,基于python或node js
现在很多人用node js做区块链的开发,因为点对点并发是区块链中的难点技术之一,而node js天然的对并发支持比较好,因此比较有优势. http://ecomunsing.com/build-yo ...
- Java打包可执行jar包 包含外部文件
外部文件在程序中设置成相对当前工程路径,执行jar包时,将外部文件放在和jar包平级的目录. public class Main { 3 public static void main(String[ ...
- 单机部署PXC
在一台机器上安装PXC Linux:centos 7 IP:192.168.30.221 PXC版本:Percona-XtraDB-Cluster-5.7.17-rel13-29.20.3.L ...
- linux进程间通讯的几种方式的特点和优缺点
# 管道( pipe ):管道是一种半双工的通信方式,数据只能单向流动,而且只能在具有亲缘关系的进程间使用.进程的亲缘关系通常是指父子进程关系.# 有名管道 (named pipe) : 有名管道也是 ...