Resize IFRAME

[Jills]

Hi All,

Does anyone have any idea about how can we resize an IFRAME
dynamically according to its content from another domain? I want to
increase the height according to the page that is displayed on it.

Regards,
Jills

[Henry]

On Jun 9, 2:28*pm, Jills wrote:

Does anyone have any idea about how can we resize an IFRAME
dynamically according to its content from another domain? I
want to increase the height according to the page that is
displayed on it.

The document object representation of a page from a different domain
will be inaccessible and so it will not be possible to determine the
display dimensions of that document. Without that information it will
not be possible to alter the height of the IFRAME to match the height
of that document.

[Bart Van der Donck]

Henry wrote:

On Jun 9, 2:28*pm, Jills wrote:

>Does anyone have any idea about how can we resize an IFRAME
dynamically according to its content from another domain? I
want to increase the height according to the page that is
displayed on it.

The document object representation of a page from a different domain
will be inaccessible and so it will not be possible to determine the
display dimensions of that document. Without that information it will
not be possible to alter the height of the IFRAME to match the height
of that document.

The original poster didn't mention how the iframe gets its new
content. When that instruction originates from the same domain as the
change of height, there is no problem:

<iframe id="ifr" height="100"></iframe>
<hr>
<input type="button" value="Google" onClick="
document.getElementById('ifr').src='http://www.google.com';
document.getElementById('ifr').height='200px';
">
<input type="button" value="Altavista" onClick="
document.getElementById('ifr').src='http://www.altavista.com';
document.getElementById('ifr').height='350px';
">

--
Bart

[preet]

The html portion
------------------
<iframe id="myframe" src="externalpage.htm" scrolling="no"
marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0"
style="overflow:visible; width:100%; display:none"></iframe>

Now the javascript to use
-----------------------
<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=["myframe"]

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

var
getFFVersion=navigator.userAgent.substring(navigat or.userAgent.indexOf("
Firefox")).split("/")[1]
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 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[i])
//reveal iframe for lower end browsers? (see var above):
if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids[i]] :
document.getElementById(iframeids[i])
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+FFextr aHeight;
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>
-----------------------------

This will resize your iframe to the dimension of the source.

Enjoy


--------------------------
http://www.eecpindia.com
http://www.anchorfx.com
http://forex.eecpindia.com
*** Sent via Developersdex http://www.developersdex.com ***