javascript - 无论加载什么页面都自动调整 iframe 的大小

Question

我有一个包含 iframe 的页面。在 iframe 中，人们可以单独导航(提交表单、我的帐户等)。这样做时，iframe 大小会在每个新的 iframe 页面上发生变化。问题是我已将单个 iframe ID 设置为自动调整大小。另一个问题是，在加载一些 iframe 之后，例如注册表格，它有一些上传照片的选项，例如，当点击它时它会扩展 iframe 的长度，所以一般的自动大小将不起作用 - 无论如何我的脚本可以处理这个 - 。我可以在所有 iframe 页面中插入我的 iframe 脚本，但是父页面如何识别每个 iframe 以自动调整它的大小？

父页面中的代码(通过 ID 自动调整单个 iframe 页面的大小):

<script>
function alertsize(pixels){
pixels+=0;
document.getElementById('myiframe').style.height=pixels+"px";
}
</script>

可以修改以上脚本以应用于 iframe 中加载的任何 iframe 页面吗？

iframe 脚本:

<script type="text/javascript">
var myHeight = 0;

setInterval(function(){
if(myHeight != document.body.scrollHeight){
    myHeight = document.body.scrollHeight;
    parent.alertsize(myHeight);
}
},500);
</script>

内嵌框架:

<iframe id="myiframe" src="../../data/my-account" name="myiframe" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>

Answer 1

您可以使用top 来引用父框架，它将引用顶部窗口对象。

top.alertsize(myHeight)

 +-----------------------+
 | top                   |
 |                       |
 | +------------------+  |
 | | iframe           |  |
 | +------------------+  |
 |                       |
 | +------------------+  |
 | | iframe           |  |
 | +------------------+  |
 +-----------------------+