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

简介: 下面是内部iframe找外部mainFrame的情况 var websiteSearchButton = window.parent.parent.document.getElementById('mainFrame')      .contentWindow.document.getElementById("webresource-search-button"); iframe中1
下面是内部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中的内容


目录
相关文章
|
JSON JavaScript 数据格式
jQuery操作页面元素属性和内容
jQuery操作页面元素属性和内容
56 0
|
4月前
|
移动开发 HTML5
HTML5页面元素及属性
【8月更文挑战第23天】HTML5页面元素及属性。
47 4
|
6月前
|
JavaScript 前端开发 API
快速实现 iframe 嵌套页面
【6月更文挑战第22天】快速实现 iframe 嵌套页面
|
JavaScript
原生js插入HTML元素
原生js插入HTML元素
116 1
|
JavaScript
iframe子页面获取父页面元素,或父页面获取iframe子页面的元素
iframe子页面获取父页面元素,或父页面获取iframe子页面的元素
173 0
|
移动开发 JavaScript 前端开发
HTML的笔记及展示(1)(锚点、a元素添加超链接href、img元素、iframe元素、HTML5新增的拖放API)
HTML的笔记及展示(1)(锚点、a元素添加超链接href、img元素、iframe元素、HTML5新增的拖放API)
148 0
HTML的笔记及展示(1)(锚点、a元素添加超链接href、img元素、iframe元素、HTML5新增的拖放API)
BOM+DOM案例——阻止链接跳转,div滚动条,元素的隐藏方式,字符串拼接
BOM+DOM案例——阻止链接跳转,div滚动条,元素的隐藏方式,字符串拼接
131 0
BOM+DOM案例——阻止链接跳转,div滚动条,元素的隐藏方式,字符串拼接
|
JavaScript 前端开发
HTML跳转到页面指定元素位置
本文目录 1. 背景 2. 通过jQuery实现 3. 通过超链接实现 4. 对比总结
443 0
|
Web App开发 JavaScript
JS事件调试 - 查找HTML元素绑定的事件以及绑定代码所在位置
原文:JS事件调试 - 查找HTML元素绑定的事件以及绑定代码所在位置 日常的网页开发调试工作中,经常需要知道指定的某个网页元素绑定了哪些事件以及绑定代码的位置,下面介绍三种用来跟踪页面中的事件的方法。
1454 0
JS事件调试 - 查找HTML元素绑定的事件以及绑定代码所在位置