0

I am loading the contents of an iframe based on the results of a SQL query which takes UI input. As such, the height of the iframe needs to be changed regularly in order for the page formatting to remain constant.

When the page loads initially, I use the following to determine the iframe's height:

onload="this.height=this.contentWindow.document.body.scrollHeight;"

This works when the page is loaded for the first time; but when the user dynamically changes the iframe's content, the onload is not retriggered, and the iframe retains its original height.

This is how the iframe is presented in my index.php when the page is initially loaded:

<script>document.write('<iframe id="mainpage-iframe" onload="this.height=this.contentWindow.document.body.scrollHeight;" src="page-body.php"></iframe>');</script>

When the user makes choices from a menu to update the iframe based on results from a SQL query, a function such as the following is triggered:

document.getElementById('mainpage-iframe').contentDocument.location.assign('page-body.php?selectvenue=' + venue + '&selectcity=' + city);

...which posts arguments to page-body.php.

So, my question is: is it possible to somehow 'append' to this result in order that the document.write function includes the onload action?

Paul Clift
  • 169
  • 8
  • See this:https://stackoverflow.com/questions/536538/pass-value-to-iframe-from-a-window – I_Al-thamary Dec 12 '18 at 14:30
  • Also use `$(document).ready(function(` http://www.peachpit.com/articles/article.aspx?p=1748185&seqNum=2 – I_Al-thamary Dec 12 '18 at 14:33
  • Thanks @i_th but the onload occurs in index.html, not in the iframe document. – Paul Clift Dec 12 '18 at 14:33
  • Add the load handler _inside_ page-body.php, make the iframe detect the height of its own content, and then have it access the parent window to set the height of the iframe element there … – misorude Dec 12 '18 at 14:38
  • @misorude Great idea. But how can I pass the value back to the already-loaded page and have it reset the height? – Paul Clift Dec 12 '18 at 14:41
  • https://stackoverflow.com/questions/935127/how-to-access-parent-iframe-from-javascript explains how to access the iframe parent window. – misorude Dec 12 '18 at 14:43
  • While that does seem like a good idea, I feel that it would be complicating things unnecessarily... Isn't it possible to simply also trigger the `onload` function then the iframe URL is updated? – Paul Clift Dec 12 '18 at 14:50
  • Hmm, the more I think about, the more I am coming around on your suggestion though... it really just comes down to passing the height of the iframe's contents back to the mainpage.... – Paul Clift Dec 12 '18 at 14:54

1 Answers1

1

Use JQuery to update the height on resize

$(document).ready(function() {
    $(window).resize(function() {
        //Update height here
    }
}
Jay Mason
  • 446
  • 3
  • 17