javascript - Auto resize iframe no matter what page loads

Question

I have a page that has an iframe within. In iframe people can navigate separately (to submit form, my account, etc ). While doing so, iframe size changes on every new iframe page. The problem is I have set a single iframe ID to auto resize. One another issue is that after some iframes load, for example registering form, it has some option to upload photo for example, option that when is clicked it extends the length of the iframe, so a general auto size will not work -anyway my script can handle this - . I can insert my script for iframe in all iframe pages but how the parent page will recognize each iframe in order to auto-resize it ?

Code in parent page(auto resizes one single iframe page by ID):

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

Above script can be modified in order to apply on whatever iframe page loads in iframe ?

Iframe script:

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

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

Iframe:

<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           |  |
 | +------------------+  |
 +-----------------------+