iframe多层级页面调用父子兄弟祖孙页面方法

• 2023-06-01
  时隔很久的更新，我是万万没想到我在这被卡了好久。当然也百度了很多方法，但是用在实战里面就是不行，最后功能终于实现了，必须记录一下。

一、需求

页面本身由许多iframe组成，因为是动态渲染的所以不能添加ID，就只能向上一层一层找，如果使用ID会方便快速很多，但是在这里先不提。

目前的需求是：在子页面2调用孙子页面的方法。

二、解决方案

1. 首先是子页面2找到父页面

// 子找父很简单，直接parent就是父页面，后面接方法名
parent.parentFn();

2. 然后是父页面找到子页面1
   这里一直报错的原因是，不同于用id查找，用标签名或者类名返回的都是一个数组，我之前就是忽略了这个问题，导致contentWindow一直是undefined，所以一定要加一个索引

// iframe太多可以使用父元素ID+iframe筛选，jq选择器我不用多说了吧
parent.$("iframe")[0].contentWindow.sonFn()

3. 最后就是调用孙子页面的方法了
   选择器找孙子页面一定记得是嵌套的，不然还是会报错。

// 分解步骤
var sonObj = $('#grandson').clidren('iframe').eq(0);		//找到子页面
var grandsonObj = $(sonObj)[0].contentWindow		//找到孙子页面

// 合并到一句里完成就是
$($('#grandson').clidren('iframe').eq(0))[0].contentWindow.grandsonFn()

4. 其他
   不一定要调用方法，同理可以传值之类的

// grandsonFn()更改为：
find("#btn").click()		//点击按钮
find("#text").html()		//获取内容
find("#input").val()		//获取值
find("input#checkBox").attr("checked","true");		//选中复选框

三、总结教训

1. 遇到复杂的页面也不要着急，一定要先认真分解页面组成，我一开始以为页面只有两层，在子页面找孙子页面的方法肯定是会报错的。
2. 多层页面尤其需要注意嵌套的关系，在没有ID的情况下选择器也要尽量精准，数组格式别忘了加上索引。
3. 以上使用的jq选择器，js选择器同理，不要在一句里面混用就可以了。