父页面怎么判断iframe里页面的AJAX加载完成并重新计算高度？

Question

公司的项目用了iframe嵌套，大概结构是这样的

<div id="a">
    <div id="b">
        <iframe id="c"></iframe>
    </div>
</div>

现在a的高度默认是500px;设计是动态修改成iframe内容的高度，
b的高度100%；
c也是100%；

c里调用的页面，有一些ajax请求加载的数据，例如表格。然后C里页面的数据加载完后，高度大于C，就会出现滚动条。为了去掉滚动条，我的想法是获取C页面高度赋予给A，但是因为C调用的页面有很多，所以想看看，是否能在当前页面（即父页面）判断子页面的AJAX加载完 然后执行计算高度的函数。

Answer 1

这个是你需要的 https://github.com/davidjbradshaw/iframe-resizer

Answer 2

父页面定时检查子页面表格有没有内容，有的话就重置高度如何？

Answer 3

iframe里可以找到父页面的任何东西 包括自己的iframe容器
window.parent.document.querySelector("#a");（单词没写错的话）
可以等AJAX完成后设置自己容器宽高

Answer 4

子页面加载完毕后，在完成事件中调用父类的方法来调整高度。

如果调用的子页面很多，那也应该有个总数，比如3个。 那么在父窗体里的重置大小的方法里加入一个判断，当前子页面加载完毕的计数==3的时候开始处理页面高度。