Solved

How can i auto resize the height in my IFRAME?

Posted on 2007-11-15
12
2,294 Views
Last Modified: 2013-11-19
hello.  I have a situation where i need to have an IFRAME auto size it's height based on the content that is loaded into it.  right now here is the IFRAME source in a file called, lets say, test.html:

<iframe id="ifrm" name="ifrm" src="http://www.remotesite.com/myfile.php" marginwidth="1" marginheight="1" width="510" height="707" border="0" frameborder="0">
Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe>

that file, "myfile.php" is on another server of mine and it will produce content varying in height etc etc so i'm wanting the file that contains the iframe code above to auto adjust it's height based on how much content is in the myfile.php file.  is this possible?  any known code to do that?
thank you!
0
Comment
Question by:linuxrox
  • 8
  • 4
12 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20289479
Try this:


<iframe name="iframe" src="home.htm" frameborder="0"
onload="this.style.height=parseInt(window.frames.iframe.document.body.scrollHeight)+50;"></iframe>
 
or 
 
<iframe name="iframe" src="home.htm" frameborder="0"></iframe>
<script>
window.frames[0].onload=function() {this.style.height=parseInt(window.frames.iframe.document.body.scrollHeight)+50;}
</script>

Open in new window

0
 

Author Comment

by:linuxrox
ID: 20289516
okay, i'll try that and get back...gotta reboot my server in a minute.
0
 

Author Comment

by:linuxrox
ID: 20290061
mplungjan:

for some reason i get "permission denied" or "access denied" : (
that shows up in status bar at lower left..javascript error.  why would that be you think?
would it be because the src="" is a remote file and not local?  
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Author Comment

by:linuxrox
ID: 20290077
let me try again, think the "access denied" was from an onload even on my remote file....
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20290116
yes that is the reason.

You will need a proxy if you want to load from external source
0
 

Author Comment

by:linuxrox
ID: 20290141
yea i still get the permission error.  if i don't try and resize the frame all the content loads up just fine though.  so does it only have to do with resizing?  because otherwise everything loads up just fine.
how would a proxy work for doing this?
0
 

Author Comment

by:linuxrox
ID: 20290215
the below works of course..but i'm giving it an actual number value instead of relying on
 parseInt(window.frames.iframe.document.body.scrollHeight)+50:


<iframe name="iframe" src="http://www.remotesite.com/test.php" frameborder="0"></iframe><script>window.frames[0].onload=function() {this.style.height=707;}</script>

Open in new window

0
 

Author Comment

by:linuxrox
ID: 20290223
code snippet didn't work:
<iframe name="iframe" src="http://www.remotesite.com/test.php" frameborder="0" onload="this.style.height=700;"></iframe>
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 20291258
You would prefix the url with a url of your own:

getremote.php?url=remotesite.com/test.php
0
 

Author Comment

by:linuxrox
ID: 20291440
okay are you saying something like this?:
<iframe name="iframe" src="localfile.php?url=http://www.remotesite.com/test.php" frameborder="0" onload="this.style.height=700;"></iframe>
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20296725
Yes. And the localfile does a curl or something to grab the site
0
 

Author Closing Comment

by:linuxrox
ID: 31409332
Thanks.  Looks like to allow people to display my system on their site with an autoadjusting iframe height, they will have to include either a php or asp script that gets the url using curl or whatever asp uses to load the page locally from their host.
0

Featured Post

Efficient way to get backups off site to Azure

This user guide provides instructions on how to deploy and configure both a StoneFly Scale Out NAS Enterprise Cloud Drive virtual machine and Veeam Cloud Connect in the Microsoft Azure Cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question