在项目中,尤其是后台管理项目,会使用到iframe嵌套的网页,说起iframe,真的是个让人头疼的东西,能避开是最好避开。不然要请随身备好氧气瓶哈(因为管理和调试过程中往往会被气缺氧!!!哈哈哈~~~)

我们正常情况下获取页面的元素$(".class")、或者document.getElementById() 等,但是在有ifraim的情况下,你想获取ifraim里面的元素时,会发现很奇怪的问题就是,在页面中直接获取元素竟然获取不到,可是当打开检查元素,控制台调试的时候,又可以获取到。刚开始遇到这个问题的时候,真的让我头疼了好久。后面经过排查和查询资料,才发现其中的缘由:

一、同域:
1、父页面获取子页面元素:
注意:onload事件
jQuery获取:
$("iframe").contents().find("holder")......;

(嵌套三层,或者更多时)
$('iframe').contents().find('iframe').contents().find("iframe")......

js获取:
window.frames["holder"].contentWindow.document 或者 window.frames[0].contentWindow.document(不推荐)
(嵌套三层,或者更多时)
window.frames[0].contentWindow.window.frames[0](......).contentWindow.document

补充:
document.frames 与 window.frames 之间的区别:
document.frames 只有IE、Opera 支持,等同于 window.frames。用来取得当前页面内 window 对象的集合。
在 Firefox、Chorome、Safari中使用 document.frames 不能获取到 FRAME 元素
window.frames['myframe'] 代替 document.frames('myframe')或document.frames['myframe']。
注意:window.frames只可写成window.frames['myframe']不能写成window.frames('myframe')

备注:有些人的浏览器不支持iframe或者说 contentWindow 报错

可以这样试试:

var x=document.getElementById("myframe");
var y=(x.contentWindow || x.contentDocument);
if (y.document)y=y.document;
y.body.style.backgroundColor="#0000ff";

2、子页面获取父页面元素:
1、子页面获取iframe父页面的DOM
jQuery获取:
$("#holder",parent.document)

js获取:
parent.document.getElementById("holder")

2、子页面获取父页面里的其他iframe子页面里的DOM
jQuery获取:
$("#holder",window.parent.frames["holder"].document)

js获取:
window.parent.frames["holder"].document.getElementById("holder")

补充:
opener 与 parent 之间的区别
opener:
opener用于在window.open的页面引用执行该window.open方法的的页面的对象。例如:A页面通过window.open()方法弹出了B页面,在B页面中就可以通过opener来引用A页面,这样就可以通过这个对象来对A页面进行操作。

parent:
parent用于iframe,frame中生成的子页面中访问父页面的对象。例如:A页面中有一个iframe或frame,那么iframe或frame中的页面就可以通过parent对象来引用A页面中的对象。这样就可以获取或返回值到A页面中。

总结:
parent指父窗口,在FRAMESET中,FRAME的PARENT就是FRAMESET窗口。 
opener指用WINDOW.OPEN等方式创建的新窗口对应的原窗口。
parent是相对于框架来说父窗口对象。 
opener是针对于用window.open打开的窗口来说的父窗口,前提是window.open打开的才有。

iframe多层嵌套时,Jquery获取元素的更多相关文章

  1. iframe多层嵌套时获取元素总结

    父页面获取子页面元素: 注意:onload事件 jQuery获取: $("iframe").contents().find("holder")......; ( ...

  2. 2014-10-28——iframe多层嵌套时获取元素总结

    同域: 父页面获取子页面元素: 注意:onload事件 jQuery获取:$("iframe").contents().find("holder")...... ...

  3. iframe多层嵌套时获取元素

    一.同域:1.父页面获取子页面元素:注意:onload事件jQuery获取:$("iframe").contents().find("holder")..... ...

  4. 元素多层嵌套,JS获取问题

    如果一段html嵌套过多,在js中获取还是比较麻烦的,我写了几套方案,大家可以参考参考,如果你有好的方法,也分享出来,让我们瞧瞧. HTML: <!DOCTYPE html> <ht ...

  5. jquery获取元素到屏幕底的可视距离

    jquery获取元素到屏幕底的可视距离 要打对号的图里的height(我自称为可视高度:滚动条未滑到最底端)  不是打叉图里的到页面底部(滚动条到最底部时的height)(offset().top方法 ...

  6. jquery 获取元素在浏览器中的绝对位置

    代码详解 1,获取对象(自定义调整打开新窗口参照元素) var obj = $("#oButton"); 实例中我获取的对象是弹出窗口按钮,这样创建的新窗口就会根椐按钮的位置进行调 ...

  7. JQuery获取元素的方法总结

    JQuery获取元素的方法总结 一.说明   获取元素的方法分为两种:jQuery选择器.jQuery遍历函数. 做个总结,巩固下知识. 二.获取本身 1.只需要一种jQuery选择器   选择器 实 ...

  8. [转载]jquery获取元素索引值index()方法:

    jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的 ...

  9. jquery获取元素索引值index()方法

    jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的 ...

随机推荐

  1. 巨杉Tech | 使用 SequoiaDB 分布式数据库搭建JIRA流程管理系统

    介绍 JIRA是Atlassian公司出品的项目与事务跟踪工具,被广泛应用于缺陷跟踪.客户服务.需求收集.流程审批.任务跟踪.项目跟踪和敏捷管理等工作领域.很多企业与互联网公司都在使用Jira作为内部 ...

  2. jdk8-》stream⾥的map和filter函数使⽤

    map函数 将流中的每⼀个元素 T(入参) 映射为 R(返回值)(类似类型转换)    类似遍历集合,对集合的每个对象做处理.场景:转换对象,如javaweb开发中集合⾥⾯的DO对象转换为DTO对象 ...

  3. Weather

    Scientists say a lot about the problems of global warming and cooling of the Earth. Indeed, such nat ...

  4. mysql cmd链接不上数据库情况汇总

    在我的电脑 属性 高级设置 环境变量 path 编辑 添加mysql bin的文件位置复制粘贴上 mysql> use mysqlERROR 1044 (42000): Access denie ...

  5. Allegro 反射仿真--IBIS模型转化

    一.IBIS模型的获取 a) 直接找芯片供应商 b) 从网上下载 i.到Google网站直接搜索某个型号的IBIS模型: ii. 到器件厂商的官方网站下载: iii.从专门提供IBIS模型的网站搜索下 ...

  6. python property(不动产)方法

    class Test(object): @property def test(self): return 100 @test.setter def test(self): return "修 ...

  7. 0121 spring-boot-redis的使用

    redis是什么呢?redis,属于NoSQL的一种,在互联网时代,起到加速系统的作用. redis是一种内存数据库,支持7种数据类型的存储,性能1S 10w次读写: redis提供的简单的事务保证了 ...

  8. HTML的页面结构

    HTML的页面结构 以下为命名的规范: header:标题头部区域的内容(用于页面或页面中的一块区域) footer:标记脚步区域的内容(用于整个页面或页面的一块区域) nav:导航类复杂内容 以上3 ...

  9. 寒假安卓app开发学习记录(7)

    今天学习了Intent的基本用法.Intent是什么?Intent在Android中的核心作用就是“跳转”(Android中的跳转机制),同时可以携带必要的信息,将Intent作为一个信息桥梁.最常用 ...

  10. centos 配置安装golang

    golang的官方下载和安装介绍: https://golang.org/doc/install 按照如下步骤安装绿色版golang ,不需要编译,解压就可以用 1)下载tar.gz 安装包 2)直接 ...