在IFrame中查找IFRAME中的元素的方式

最新推荐文章于 2024-11-30 09:00:00 发布

涂作权的博客

最新推荐文章于 2024-11-30 09:00:00 发布

阅读量7.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 # JQuery # javascript # JavaSE

本文链接：https://blog.youkuaiyun.com/tototuzuoquan/article/details/51188021

前端同时被 3 个专栏收录

49 篇文章

订阅专栏

JavaSE

40 篇文章

订阅专栏

JQuery

37 篇文章

订阅专栏

本文介绍如何在不同层级的iframe间进行DOM元素的访问与操作，包括子页面访问父页面及跨多级iframe获取元素的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面是内部iframe找外部mainFrame的情况

var websiteSearchButton = window.parent.parent.document.getElementById('mainFrame')
.contentWindow.document.getElementById("webresource-search-button");

iframe中
1、子页面找符页面中的元素
$(window.parent.document).find(id);
2、父页面--->子页面中的
$(id).contents().find(元素id).find(元素id);
3、子页面--->爷爷界别的页面
$(window.top.document).find(id);

例子：

var body2 = jQuery(window.top.document.getElementById("eWebEditor2")).eq(0).contents().find("#eWebEditor").contents().find("body").html();
console.log(body2);

1、window.top.document.getElementById("eWebEditor2") :表示在一个iframe中找最顶层中的document,然后在找最外层的document中的eWebEditor2的这个元素（上例子表示的是一个iframe），

2、jQuery(window.top.document.getElementById("eWebEditor2")) 表示把eWebEditor2这个iframe转成jQuery对象

3、jQuery(window.top.document.getElementById("eWebEditor2")).eq(0) 表示取到第一个元素

4、.contents().find("#eWebEditor") 表示取eWebEditor2这个iframe中eWebEditor这个元素(这里这个元素表示的又是一个iframe)

5、jQuery(window.top.document.getElementById("eWebEditor2")).eq(0).contents().find("#eWebEditor").contents() 表示eWebEditor这个iframe中的内容

6、jQuery(window.top.document.getElementById("eWebEditor2")).eq(0).contents().find("#eWebEditor").contents().find("body") 表示取到eWebEditor这个内容中的body元素

7、最终 jQuery(window.top.document.getElementById("eWebEditor2")).eq(0).contents().find("#eWebEditor").contents().find("body").html(); 表示body中的内容