如何在iframe框架中控制主页面的元素

通过灵活使用js中的windows对象中的top、parent、self可以实现如何在iframe框架中控制主页面的元素。

介绍top、parent、self的区别

top：指的永远是分割窗口中最高层次的浏览器窗口
parent：指的是当前窗口的父级浏览器窗口
self：自身

场景描述

业务需求：一个页面中引入了一个iframe窗口，当点击窗口中的某个元素实现关闭整个iframe的功能，这时候就需要在iframe框架中控制主页面的元素。

实现方式

1. 为顶层窗口中的iframe元素设置id=“mIframe”
2. 为iframe窗口中的元素绑定关闭事件closeIframe()
3. 向关闭事件中添加代码 top.document.getElementById('mIframe').style="display:none;"
   当然，实现元素的显示与关闭有很多种，本文只介绍top的使用方式，不对其他内容做过多的介绍