Joomla iFrame dynamic height

Question

I have developed a small angular application which needs to be used in a joomla website. To do this, I am using an iFrame. The height of the iFrame however needs to be defined in the parameters and needs to be dynamic as the application is responsive.

I have been searching for two days now for possible solutions. A lot can be found using google, but none of the solutions seem to work. I am adding the iFrame using an article and adding following code:

<p><iframe id="glu" class="wrapper" src="calculator/#/plastic" name="iframe" width="100%" height="150">
    This option will not work correctly. Unfortunately, your browser does not support inline frames.</iframe></p>

For handling the dynamic height, one of the solutions available was to add following javascript code:

<script language="JavaScript">// <![CDATA[
function resize_iframe()
{

    var height=window.innerWidth;//Firefox
    if (document.body.clientHeight)
    {
        height=document.body.clientHeight;//IE
    }
    //resize the iframe according to the size of the
    //window (all these should be on the same line)
    document.getElementById("glu").style.height=parseInt(height-
    document.getElementById("glu").offsetTop-8)+"px";
}

// this will resize the iframe every
// time you change the size of the window.
window.onresize=resize_iframe; 
</script>

It seems like all of these parameters return the same, incorrect value: -Height -InnerHeight -clientHeight -> these all return the same value, which is the height that was initially defined in the iFrame.

I have tried a lot of other variants but none of them work.

Does anybody have a working example of this? Note that the issue only seems to persist when using a framework like Joomla / wordpress..

Other options I am thinking of: -Create an iFrame element in the article javascript code and build it using the html code from the application -Create a service that holds the actual height of the iframe application. Setter can be defind in the application itself so a getter can be set in the iFrame element in the article.

Any bright ideas / examples?

I know there are already some stack overflow questions about this but none of them provide a correct answer to this question.

Answer 1

I believe you are on the right track. It would require a getter and setter of an iframe height variable.

IMO I have yet to get a guaranteed percentage height solution using iframes within Joomla/WP. Only an absolute value seems to work across all browsers. Using the following code it can assess the height value of the page being loaded.

For the JS to calculate the height required for the iframe, the top margin of the web page & content needs to be zero.

IFRAME PAGE

1. Remove page top margin: Set body tag margin-top:0; inline CSS.
2. Remove content top margin: style="margin-top:0;" inline CSS.
3. Put body content in named div:

4. Place JS at bottom of the body content of the iframe page immediately below the closing </div> tag:

   <script type="text/javascript"> parent.AdjustIframeHeight(document.getElementById("page-container").scrollHeight); </script>

PAGE WITH IFRAME CODE:

<iframe id="form-iframe" src="iframe1formexample.html" style="margin:0; width:100%; height:150px; border:none; overflow:hidden;" scrolling="no" onload="AdjustIframeHeightOnLoad()"></iframe>

Change the value of the src attribute to the URL of the iframe page. Both the id and onload attributes are required.

Insert JavaScript below the iframe:

<script type="text/javascript">
function AdjustIframeHeightOnLoad() { 
document.getElementById("form-iframe").style.height = document.getElementById("form-iframe").contentWindow.document.body.scrollHeight + "px";
}
function AdjustIframeHeight(i) { 
document.getElementById("form-iframe").style.height = parseInt(i) + "px";
}
</script>

The id value of the iframe tag in the previous list item is specified in the JavaScript in three places. If the id value "form-iframe" of the iframe is changed, all three places in the JavaScript must be changed accordingly.

The function AdjustIframeHeightOnLoad() adjusts the iframe height when the iframe is first loaded. The function AdjustIframeHeight() adjusts the iframe height when called from the JavaScript in the iframe page.