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中QQ购买平台地图元素选择器);

调用方法:

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

子级向上查找父级元素:

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

调用方法:

window.parent.父页面方法;

当嵌套三层,或者更多时:

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

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


更多相关文章

  1. php操作redis命令及代码实例大全
  2. HTML常用元素样式、定位学习与应用
  3. CSS伪类选择器、box-sizing属性、常用单位、媒体查询
  4. 使用flex、grid跟定位布局仿一个简易的淘宝手机端静态页面
  5. 1. 实例演示解构赋值,特别是函数参数中使用解构的方式2. dom元素
  6. 原生Js增删改查及解构赋值
  7. JavaScript实现留言板添加删除留言
  8. box-sizing、伪类选择器参数及媒体查询的应用
  9. 仿smzdm移动端首页

随机推荐

  1. 【Mark 】AndroidStudio_移动应用开发
  2. 转-Android UI学习 - Tab的学习和使用
  3. Android UI LinearLayout权限级别与Table
  4. android滚动条
  5. android调用系统功能
  6. View的xml的属性作用大剖析
  7. TextView和EidtText使用技巧
  8. 《Android 应用 之路》 MPAndroidChart~B
  9. Android在全球的市场份额雄起
  10. Android ActionBar 作为导航条的一个Bug