文档章节

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

sjzmlb
 sjzmlb
发布于 2015/06/30 11:22
字数 474
阅读 4387
收藏 2
父页面获取子页面元素:

注意:onload事件

jQuery获取:
$("iframe").contents().find("holder")......;

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


js获取:
window.frames["holder"].document 或者 window.frames[0].document(不推荐)

(嵌套三层,或者更多时)
window.frames[0].window.frames[0](......).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')


子页面获取父页面元素:


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打开的才有。

本文转载自:http://www.cnblogs.com/bugong/p/4057158.html

sjzmlb
粉丝 7
博文 30
码字总数 2410
作品 0
海淀
程序员
私信 提问
javascript--iframe的JS方法,用法!contentWindow 、paren...

还是先感谢“妙味课堂”出的这期教学视频! 一、在使用iframe的页面,要操作这个iframe里面的DOM元素可以用: contentWindow、contentDocument(测试的时候chrom浏览器,要在服务器环境下) 1...

niceguy_php
2013/03/04
1K
0
selenium+python实现1688网站验证码图片的截取

selenium+python实现1688网站验证码图片的截取 1. 背景 在1688网站爬取数据时,如果访问过于频繁,无论用户是否已经登录,就会弹出如下所示的验证码登录框。 一般的验证码是类似于如下的元素...

zwq912318834
2017/11/22
0
0
bDialog v2.0 发布,增加消息对话框、遮罩等新功能

下拉分页选择插件 bDialog v2.0 发布了,插件更新内容: 修复窗口最大化后,内部iframe高度没有最大化的问题 重构代码结构 增加窗口打开后的动画效果 增加国际化多语言支持 增加bDialog.ale...

TerryZ
2017/09/04
1K
15
iframe的运用---特别是获取父子页面的元素

TL;DR 使用 同域的情况下,当前页面获取iframe页面里面的元素的话,必须使用加载事件,,就是iframe的document 同域的情况下,子页面获取父页面元素的话,就是父页面的document 查看示例dem...

颜酱
08/16
0
0
【翻译】Iframe, onload 与 document.domain

原文链接:http://www.nczonline.net/blog/2009/09/15/iframes-onload-and-documentdomain/ 译者:Demix 在web2.0的时代,越来越多的人开始关注使用iframe将第三方网站的内容嵌入自己的网站中...

山哥
2011/09/19
206
0

没有更多内容

加载失败,请刷新页面

加载更多

全面兼容IE6/IE7/IE8/FF的CSS HACK写法

浏览器市场的混乱,给设计师造成很大的麻烦,设计的页面兼容完这个浏览器还得兼容那个浏览器,本来ie6跟ff之间的兼容是很容易解决的。加上个ie7会麻烦点,ie8的出现就更头疼了,原来hack ie...

前端老手
9分钟前
3
0
常用快递电子面单批量打印api接口对接demo-JAVA示例

目前有三种方式对接电子面单: 1.快递公司:各家快递公司逐一对接接口 2.菜鸟:支持常用15家快递电子面单打印 3.快递鸟:仅对接一次,支持常用30多家主流快递电子面单打印 目前也是支持批量打...

程序的小猿
12分钟前
5
0
Yii 框架中rule规则必须搭配验证函数才能使用

public $store_id;public $user_id;public $page;public $limit;public $list;public $mch_list;public $cart_id;public $is_community;public $shop_id;public $cart_typ......

chenhongjiang
14分钟前
2
0
Flutter使用Rammus实现阿里云推送

前言: 最近新的Flutter项目有“阿里云推送通知”的需求,就是Flutter的App启动后检测到有新的通知,点击通知栏然后跳转到指定的页面。在这里我使用的是第三方插件Rammus来实现通知的推送,之...

EmilyWu
15分钟前
38
0
Knative 实战:三步走!基于 Knative Serverless 技术实现一个短网址服务

短网址顾名思义就是使用比较短的网址代替很长的网址。维基百科上面的解释是这样的: 短网址又称网址缩短、缩短网址、URL 缩短等,指的是一种互联网上的技术与服务,此服务可以提供一个非常短...

阿里巴巴云原生
30分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部