Joomla iFrame dynamic height

admin

Administrator
Staff member
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, <strong>but none of the solutions seem to work.</strong> I am adding the iFrame using an article and adding following code:

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

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

Code:
&lt;script language="JavaScript"&gt;// &lt;![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; 
&lt;/script&gt;

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.