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)上的问题
前言 才发现已经有一段时间没有写博客了,就简单的说了最近干了啥吧.前段时间忙了杂七杂八的事情,首先弄了个个人的小程序,对的,老早就写了篇从零入手微信小程序开发,然后到前段时间才弄了个简单的个人小程序, ...
随机推荐
- [python] python单元测试经验总结
python写单元大多数都会用到unittest和mock,测试代码覆盖率都会用到coverage,最后再用nose把所有的东西都串起来,这样每次出版本,都能把整个项目的单元测试都运行一遍. Unit ...
- js jquery.pagination.js分页
1.使用插件为 jquery.pagination.js ,如果没有这个js文件的话,我可以给发个. 首先引用 jquery.pagination.js (分页js),跟pagination.css( ...
- vue - webpack、babel
一.webpack 在这里我仅仅的是对webpack做个讲解,webpack这个工具非常强大,解决了我们前端很繁琐的一些工具流程繁琐的事情.如果感兴趣的同学,建议还是看官网吧. 中文链接地址:http ...
- 利用Qt开发跨平台APP(二)(iOS,使用Qt5.9,很详细,有截图)
本文将手把手教你如何使用Qt编译出iOS应用程序. Qt是一个优秀的跨平台开发工具.我们利用Qt可以很方便地将一次编写的应用,多次编译到不同平台上,如Windows.Linux.MAC.Android ...
- 如何在linux下安装jdk并运行java程序
一.进入root 大家可以看到我这里用的是CentOS 6.5 系统 二.测试网络与YUM是否可用 1.测试网络 ping www.baidu.com,如下图就是通了 参考: 一.JDK安装1.lin ...
- MySQL 储存过程-原理、语法、函数详细说明
Mysql储存过程是一组为了完成特定功能的SQL语句集,经过编译之后存储在数据库中,当需要使用该组SQL语句时用户只需要通过指定储存过程的名字并给定参数就可以调用执行它了,简而言之就是一组已经写好的命 ...
- 整数(质因子)分解(Pollard rho大整数分解)
整数分解,又称质因子分解.在数学中,整数分解问题是指:给出一个正整数,将其写成几个素数的乘积的形式. (每个合数都可以写成几个质数相乘的形式,这几个质数就都叫做这个合数的质因数.) .试除法(适用于范 ...
- Bootstrap单按钮的下拉菜单
简介 把任意一个按钮放入 .btn-group 中,然后加入适当的菜单标签,就可以让按钮作为菜单的触发器了. 插件依赖 按钮式下拉菜单依赖下拉菜单插件 ,因此需要将此插件包含在你所使用的 Bootst ...
- (24)如何使用HttpClient
介绍 HttpClient是HTTP客户端的接口.HttpClient封装了各种对象,处理cookies,身份认证,连接管理等. 概念 HttpClient的使用一般包含下面6个步骤: 创建 Http ...
- node核心:异步流程控制
Node.js的异步是整个学习Node.js过程中重中之重. 1)异步流程控制学习重点 2)Api写法:Error-first Callback 和 EventEmitter 3)中流砥柱:Promi ...