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:
For handling the dynamic height, one of the solutions available was to add following javascript code:
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.
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:
<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:
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.