iframe中如何获取子级和父级元素方法总结
iframe 在开发中多多少少会用到,尤其是在开发系统时,但是这会让我们前端面临一个问题,那就是如果 iframe 嵌套过多了就会导致元素获取不到,或者是不好获取,那么,iframe 中如何获取子级和父级元素呢?今天我把我们常用的方法做了一个总结,方便日后查看学习,也为后来的小伙伴提供参考。推荐阅读《 iframe 的初步认识》《iframe 安全性探索》《iframe 自适应之广告设计》
JS 获取
父级获取子级元素:
window.frames[iframe 的 name 属性值];
调用方法:
- document.getElementById(“子页面元素 ID”).contentWindow.子页面方法名;
- document.getElementsByTagName(“子页面元素标签名”)[i].contentWindow.子页面方法名;
- document.getElementsByClassName(“子页面元素类名”)[i].contentWindow.子页面方法名;
子级获取父级元素:
- window.parent.document.getElementById(“父页面元素 ID”);
- window.parent.document.getElementsByTagName(“父页面元素标签名”)[i];
- window.parent.document.getElementsByClassName(“父页面元素类名”)[i];
调用方法:
window.parent.父页面方法;
jQuery 获取
父级查找子级元素:
$(iframe 选择器).contents().find(iframe 中元素选择器);
调用方法:
$(iframe 选择器)[0].contentWindow.子页面方法名;
子级向上查找父级元素:
- $(父页面元素选择器, window.parent.document);
- window.parent.$(父页面元素选择器)window.parent.父页面方法;
调用方法:
window.parent.父页面方法;
当嵌套三层,或者更多时:
$('iframe').contents().find('iframe').contents().find("iframe")......
东西很简单,当做笔记记录一下。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » iframe中如何获取子级和父级元素方法总结
码云笔记 » iframe中如何获取子级和父级元素方法总结
最近在做项目遇到过这个问题,找了半天也找不到class,才明白有iframe原因导致,看了楼主分享问题已解决
感谢认可,嘿嘿