一、在使用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使用的更多相关文章

  1. 完美判断iframe是否加载完成

    var iframe = document.createElement("iframe"); iframe.style.width = "265px"; ifr ...

  2. js学习笔记:操作iframe

    iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...

  3. 页面嵌入dom与被嵌入iframe的攻防

    1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...

  4. iframe用法

    <iframe src="http://caiyanli.top/" height="500"  width="500" frameb ...

  5. 如何获取url中的参数并传递给iframe中的报表

    在使用报表软件时,用户系统左边一般有目录树,点击报表节点就会在右侧网页的iframe中显示出报表,同时点击的时候也会传递一些参数给网页,比如时间和用户信息等.如何使网页中的报表能够获取到传递过来的参数 ...

  6. JavaScript权威设计--Window对象之Iframe(简要学习笔记十四)

    1.Window对象属性的文档元素(id) 如果在HTML文档中用id属性来为元素命名,并且如果Window对象没有此名字的属性,Window对象会赋予一个属性,它的名字是id属性的值,而他们的值指向 ...

  7. ASP.NET 页面禁止被 iframe 框架引用

    两个站点: a.sample.com b.sample.com a.sample.com 站点中的一段示例 JS 代码: var iframe = document.createElement(&qu ...

  8. 父页面操作iframe子页面的安全漏洞及跨域限制问题

    一.父子交互的跨域限制 同域情况下,父页面和子页面可以通过iframe.contentDocument或者parent.document来交互(彼此做DOM操作等,如父页面往子页面注入css). 跨域 ...

  9. 解决iframe作为子窗口,刷新后iframe页面跳转到其它页面的问题

    转载请在页首注明作者与出处 http://www.cnblogs.com/zhuxiaojie/p/5990262.html 前言: 在开发网站时,尤其是管理后台,我们经常会使用iframe作为内容窗 ...

  10. 三种上传文件不刷新页面的方法讨论:iframe/FormData/FileReader

    发请求有两种方式,一种是用ajax,另一种是用form提交,默认的form提交如果不做处理的话,会使页面重定向.以一个简单的demo做说明: html如下所示,请求的路径action为"up ...

随机推荐

  1. oracle删除表空间报ORA-22868

    1.删除表空间报ora-22868问题,该表空间包含其他表空间的表的大字段. 思路:要么把字段迁移走,要么把表清理了. 2.处理方法一:将大字段迁移到其他表空间 select 'alter table ...

  2. 使用element上传图片的时候的限制只上传一个的问题

    <el-form-item label="轮播图图片" prop="image"> <el-upload class="avatar ...

  3. react 非父子组件传参方式

    1.通过父组件当中间人方式,子传父再传子 2.通过发布订阅模式 obj={ list:[], sub(callback){ list.push(callback) }, pub(){ list.for ...

  4. k8s排错(Unhealthy)

      1,组件 Unhealthy 通过kubeadm安装好kubernetes v1.18.6 查看集群状态,发现组件controller-manager 和scheduler状态 Unhealthy

  5. Study python_02

    分支结构 简单的使用if语句 使用if-else import random# 调用一个随机数包(只看if的情况可忽略) n1 = random.randrange(100) n2 = random. ...

  6. 廖雪峰JS知识点整理——快速入门

    基本语法 1.每个语句以:结尾. 2.单行注释://... 3.多行注释:/*... ...*/ 数据类型和变量 运算 1.==自动转换数据类型在比较,不推荐使用 2.===不会转换数据类型,推荐使用 ...

  7. CSS 层叠式-理解层叠性和继承性

    CSS的概念中,除了前面提到的样式外,还有一个重要的概念就是层叠式,层叠式是贯穿整个css的一个性质,包含继承性和层叠性. 继承性: • 如果一个标签没有设置过一些样式,它的某个祖先级曾经设置过,在浏 ...

  8. 针对“RuntimeError: each element in list of batch should be of equal size” 问题解决

    第一次运行代码出现了这个问题: 这个问题的出现主要来源于DataLoader类中的collate.py文件造成的问题,由于每个batch里的长度不一致,因此导致出现了该问题. 通过百度方法和查看源码去 ...

  9. api接口基础Day2

    精华笔记: 正则表达式: 用于描述字符串的内容格式,使用它通常用于匹配一个字符串是否符合格式要求 正则表达式的语法:-------------了解.不用纠结.不用深入研究 1.[]:表示一个字符,该字 ...

  10. Java中接口相关知识

    1.接口 1.1接口概述 接口就是一种公共的规范标准,只要符合标准,大家都可以通用 Java中的接口更多的体现在对行为的抽象 1.2接口的特点 接口用关键字interface修饰,格式:public ...