iframe中如何获取子级和父级元素方法总结

iframe 在开发中多多少少会用到，尤其是在开发系统时，但是这会让我们前端面临一个问题，那就是如果 iframe 嵌套过多了就会导致元素获取不到，或者是不好获取，那么，iframe 中如何获取子级和父级元素呢？今天我把我们常用的方法做了一个总结，方便日后查看学习，也为后来的小伙伴提供参考。推荐阅读《 iframe 的初步认识》《iframe 安全性探索》《iframe 自适应之广告设计》

JS 获取

父级获取子级元素：

window.frames[iframe 的 name 属性值];

调用方法：

1. document.getElementById(“子页面元素 ID”).contentWindow.子页面方法名;
2. document.getElementsByTagName(“子页面元素标签名”)[i].contentWindow.子页面方法名;
3. document.getElementsByClassName(“子页面元素类名”)[i].contentWindow.子页面方法名;

子级获取父级元素：

1. window.parent.document.getElementById(“父页面元素 ID”);
2. window.parent.document.getElementsByTagName(“父页面元素标签名”)[i];
3. window.parent.document.getElementsByClassName(“父页面元素类名”)[i];

调用方法：

window.parent.父页面方法;

jQuery 获取

父级查找子级元素：

$(iframe 选择器).contents().find(iframe 中元素选择器);

调用方法：

$(iframe 选择器)[0].contentWindow.子页面方法名;

子级向上查找父级元素：

1. $(父页面元素选择器, window.parent.document);
2. window.parent.$(父页面元素选择器)window.parent.父页面方法;

调用方法：

window.parent.父页面方法;

当嵌套三层，或者更多时：

$('iframe').contents().find('iframe').contents().find("iframe")......

东西很简单，当做笔记记录一下。

以上关于iframe中如何获取子级和父级元素方法总结的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。