iframe auto height

Curious if anyone has tried this? I've got a website which I want my forumotion forum to be one of the subpages, in which case it should appear inside the centeral iframe. Now, my iframe is designed to auto-resize based on the contents of page loaded into the iframe, as a way to eliminate iframe scrollbars, which is pretty easy to do when parent and source are on the same domain. Since, forumotion is on a different domain I need to find another way to post the height of the loaded page, and to recalculate that height when the source page changes height.

I figure there's just a Javascript I need to add, but I'm a bit new to javascript and have gotten lost trying to do the leg work. If anyone has already overcome this issue and wouldn't mind sharing the code, that'd be great.

here is a iframe you can adjust the height and width.

Code:

<iframe src='YOU URL LINK HERE' width='100%' height='825px' style='border: 0px solid #'></iframe>

That's just a basic iframe tag. I'm looking for code (likely javascript) for an iframe that will auto-resize it's height information based on the contents of page loaded into the iframe.

jasonseabaugh wrote:That's just a basic iframe tag. I'm looking for code (likely javascript) for an iframe that will auto-resize it's height information based on the contents of page loaded into the iframe.

yeah not sure, you can read this over here.
http://geekswithblogs.net/rashid/archive/2007/01/13/103518.aspx

or try this, i have not tested it though.

Code:

<script type="text/javascript">

//Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
//Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
var iframeids=["maincntnt"]



//Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
var iframehide="no"

var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 3 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers

function resizeCaller() {
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++){
if (document.getElementById)
resizeIframe(iframeids)
//reveal iframe for lower end browsers? (see var above):
if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)
tempobj.style.display="block"
}
}
}

function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
if (currentfr && !window.opera){
currentfr.style.display="block"
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight;
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent){
currentfr.detachEvent("onload", readjustIframe) // Bug fix line
currentfr.attachEvent("onload", readjustIframe)
}
}
}

function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}

function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}

if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller

</script>



 

Other then that if those two scripts do not help above, I am sure someone will have one for you. I my self usually just use basic frames, here is a better one you can remove the scroll with. And yes i know you said it's not what your looking for just figured i would add it anyway in case you wanted to try it

Code:


<iframe src="SITE URL HERE" width="100%"
height="100%" name="youriframe" frameborder="0" vspace="0" hspace="0"
marginwidth="0" marginheight="0" scrolling="no" noresize></iframe>
 

Rideem3 wrote:How big do you want the iframe? To cover the whole page?

Yeah i think he wants it to basically open up and auto re-size the same way the content is presented on whatever site url he is using? If not he can explain more

How big do you want the iframe? To cover the whole page?

Sort of. I want to be able to explicitly define the width, so it's fits in my website's visual shell, and I want the height to be dynamic, adjusting to the height of the source page.

This can be done if you have complete control over the HTML of both parent website (my website) and the child website (iframe content: my forum). For Forumotion I can only add javascripts, not control the contents of the HTML in the page.

I'm hoping someone has already figured out how to do this and has code to share.

Give the iframe an Name attribute of 'mainframe'
And try adding this right below it:

Code:


<script>
(function(){
var iframe = parent['mainframe'];
var height = iframe.document.body.offsetHeight;
iframe.setAttribute('height',height);
})();
</script>


That code snippet does not work cross-domain. There's a lot of information on the web about cross-domain iframe height setting, but it's a bit out of my depth... which is why I was hoping to find someone who crossed that bridge already and had code to share. Thanks for your input, tho.

What about LG code, his stuff usually rocks?

whats that schools thing website a lot of people go to for coding and web designing, i forget the name of it but i bet you can find it there. it's something school????? lol i cant remember

Someone will know what site i am talking about.

What do you meAn cross domain?
It's standard JavaScript and the domain does not affect it.

The problem may be that it is executing before the iframe content is loaded.
In which case do this:

Code:


<script>
function setIframeHeight(iframe) {
  iframe.setAttribute('height',parent.mainframe.document.body.offsetHeight);
}
</script>


You'll need to include that code snippet in your sites HTML somewhere.
And change your iframe to have an onload attribute.
onload="setIframeHeight(this)"

And also keep it with a name attribute of 'mainframe'

This DOES work, it's a simple task honestly. If it doesn't work you have done something wrong or missed something out.

yeah jasonseabaugh i would not go getting side tracked with that link i posted,That's just something i found and dint know if it would help you or not. I just did a google search and found them few items on it. I was hoping you would know if thats what you needed or not..

So try what LG has said and take your time with it.

Oh by the way if someone knows the name of that site i was talking about can you please post the link
Thanx

I'm guessing you mean w3schools
It can be a great resource, especially for people learning.