最新公告  | 
  • CTRL + D 加入收藏不迷路哦!

  • 欢迎您光临码云笔记网,一个关注WEB前端开发的个人技术博客!

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")......

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

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » iframe中如何获取子级和父级元素方法总结

2 评论

  1. 最近在做项目遇到过这个问题,找了半天也找不到class,才明白有iframe原因导致,看了楼主分享问题已解决

    1. 感谢认可,嘿嘿

发表评论

准备开启WordPress网站建设推广?

联系我们 定制开发