iframe.contentWindows使用
一、在使用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 });
参考:https://www.cnblogs.com/carriezhao/p/9429165.html
iframe.contentWindows使用的更多相关文章
- 完美判断iframe是否加载完成
var iframe = document.createElement("iframe"); iframe.style.width = "265px"; ifr ...
- js学习笔记:操作iframe
iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...
- 页面嵌入dom与被嵌入iframe的攻防
1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...
- iframe用法
<iframe src="http://caiyanli.top/" height="500" width="500" frameb ...
- 如何获取url中的参数并传递给iframe中的报表
在使用报表软件时,用户系统左边一般有目录树,点击报表节点就会在右侧网页的iframe中显示出报表,同时点击的时候也会传递一些参数给网页,比如时间和用户信息等.如何使网页中的报表能够获取到传递过来的参数 ...
- JavaScript权威设计--Window对象之Iframe(简要学习笔记十四)
1.Window对象属性的文档元素(id) 如果在HTML文档中用id属性来为元素命名,并且如果Window对象没有此名字的属性,Window对象会赋予一个属性,它的名字是id属性的值,而他们的值指向 ...
- ASP.NET 页面禁止被 iframe 框架引用
两个站点: a.sample.com b.sample.com a.sample.com 站点中的一段示例 JS 代码: var iframe = document.createElement(&qu ...
- 父页面操作iframe子页面的安全漏洞及跨域限制问题
一.父子交互的跨域限制 同域情况下,父页面和子页面可以通过iframe.contentDocument或者parent.document来交互(彼此做DOM操作等,如父页面往子页面注入css). 跨域 ...
- 解决iframe作为子窗口,刷新后iframe页面跳转到其它页面的问题
转载请在页首注明作者与出处 http://www.cnblogs.com/zhuxiaojie/p/5990262.html 前言: 在开发网站时,尤其是管理后台,我们经常会使用iframe作为内容窗 ...
- 三种上传文件不刷新页面的方法讨论:iframe/FormData/FileReader
发请求有两种方式,一种是用ajax,另一种是用form提交,默认的form提交如果不做处理的话,会使页面重定向.以一个简单的demo做说明: html如下所示,请求的路径action为"up ...
随机推荐
- 光纤加速计算 383-高速信号处理板 XCKU060的双路QSFP+光纤PCIe 卡 XCKU060板卡
基于kintex UltraScale XCKU060的双路QSFP+光纤PCIe 卡 一.板卡概述 本板卡系北京太速科技自主研发,基于Xilinx UltraScale Kintex系列FPGA ...
- nodejs发布cesium问题,其他电脑访问发布
在电脑上安装nodejs后在选择的cesium文件中,按住shift和鼠标右键,打开powershell,输入命令行hs -p 1212,完成cesium的发布,出现两个网址,127.0.0.1:12 ...
- from pathlib import Path
from pathlib import Path #引入库 P.parent #获取父级目录 P.exists() #判断当前路径是否存在 P.mkdir(parents=Fasle) # 根据路径创 ...
- 浅谈前端自动化构建(Grunt、gulp。webpack)
前言 现在的前端开发已经不再仅仅只是静态网页的开发了,日新月异的前端技术已经让前端代码的逻辑和交互效果越来越复杂,更加的不易于管理,模块化开发和预处理框架把项目分成若干个小模块,增加了最后发布的困难, ...
- setState 更新
同步逻辑中,setState异步更新,同步更新会合并为一次更新 异步逻辑中,setState同步更新 this.setState({ data:data,()=>{ } }) 在回调函数里面了解 ...
- centos7 七步教你安装搭建 LAMP 服务
先说说LAMP是什么 LAMP是指一组通常一起使用来运行动态网站或者服务器的自由软件名称首字母缩写: Linux,操作系统 Apache,网页服务器 MariaDB或MySQL,数据库管理系统(或者数 ...
- 替代学习物联网-云服务-02阿里云MQTT
1.支付宝登录,进入物联网平台 https://iot.console.aliyun.com/product 2.新建产品 3.添加设备 4.设备连接参数 5.连接到阿里云
- NavicatPremium16破解!!!!!亲测可用!!!!!!!!!!!!!!!!!
前言 Navicat premium是一款数据库管理工具,是一个可多重连线资料库的管理工具,它可以让你以单一程式同时连线到 MySQL.SQLite.Oracle 及 PostgreSQL 资料库,让 ...
- 服务器 安装docker (启动坑了很久才成功)docker-compose
安装docker: 1.Docker要求CentOS系统的内核版本高于 3.10 , 通过 uname -r 命令查看你当前的内核版本是否支持安账docker 2.更新yum包: sudo yu ...
- iOS block相关面试题
一.前言本文重点来研究一下 objc 的 block,并具体来分析一下以下一些面试题目:block 的内部实现,结构体是什么样?block 是类吗?有哪些类型?一个 int 变量被 __block 修 ...