ajustar tamaño iframe

millirules · #1 (**permalink**) 24/06/2008, 05:55

Hola! Se que este es un tema que ya se ha tratado aqui, pero es que no consigo hacer que me funcione para FireFox.

El caso es que estoy intentando hacer un menu, en el que un iframe cargue una pagina web, e intento que el tamaño del iframe se ajuste al de la pagina que voy a cargar. Lo he conseguido hacer para opera y para IE, pero no consigo que funcione para FireFox, me podeis ayudar? Este es el codigo de la pagina de prueba:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<script>
var frame1 = true;
var frame2= true;
</script>
<script type="text/javascript">
function cargar1() {
var hframe;
var navegador = navigator.appName
if (frame1== true) {
document.getElementById('iframe1').src = 'index.html';
document.getElementById('iframe1').width = '425px';
if (navegador == "Microsoft Internet Explorer"){
hframe=document.getElementById('iframe1').document .body.offsetHeight+"px";}//para IE
else if (navegador == "Opera") {
hframe=document.getElementById('iframe1').document .body.offsetHeight+"px";}//para Opera
else {
hframe = parent.document.getElementById('iframe1').document .height;

}//para Firefox
document.getElementById('iframe1').height = hframe;
frame1=false;
}
else {
document.getElementById('iframe1').width = '0px';
document.getElementById('iframe1').height = '0px';
document.getElementById('iframe1').src = '';
frame1=true;
}
}
</script>

<title>IFrames - demostración</title>
</head>

<body>
<p><a onClick="javascript:cargar1()">boton1</a></p>
<iframe src="" id="iframe1"
width="0" height="0" scrolling="no" frameborder="0" noresize transparency>
<p> </p>
<p>Texto alternativo para navegadores que no aceptan iframes.</p>
</iframe>
</body>
<html>

Si podeis ayudarme os lo agradeciria mucho, ya que me estoy volviendo loco!!!

Un saludo!

Panino5001 · #2 (**permalink**) 24/06/2008, 13:35

Probá así:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title></title>

<script>

function getWindowData(n,i){

    var ifr=document.getElementById(i).contentWindow.document || document.getElementById(i).contentDocument;

    var widthViewport,heightViewport,xScroll,yScroll,widthTotal,heightTotal;

    if (typeof window.frames[n].innerWidth != 'undefined'){

        widthViewport= window.frames[n].innerWidth;

        heightViewport= window.frames[n].innerHeight;

    }else if(typeof ifr.documentElement != 'undefined' && typeof ifr.documentElement.clientWidth !='undefined' && ifr.documentElement.clientWidth != 0){

        widthViewport=ifr.documentElement.clientWidth;

        heightViewport=ifr.documentElement.clientHeight;

    }else{

        widthViewport= ifr.getElementsByTagName('body')[0].clientWidth;

        heightViewport=ifr.getElementsByTagName('body')[0].clientHeight;

    }

    xScroll=window.frames[n].pageXOffset || (ifr.documentElement.scrollLeft+ifr.body.scrollLeft);

    yScroll=window.frames[n].pageYOffset || (ifr.documentElement.scrollTop+ifr.body.scrollTop);

    widthTotal=Math.max(ifr.documentElement.scrollWidth,ifr.body.scrollWidth,widthViewport);

    heightTotal=Math.max(ifr.documentElement.scrollHeight,ifr.body.scrollHeight,heightViewport);

    return [widthViewport,heightViewport,xScroll,yScroll,widthTotal,heightTotal];

} 

function resizeIframe(ID,NOMBRE){

document.getElementById(ID).height=null;

document.getElementById(ID).width=null;

window.location='#';//necesario para safari

var m=getWindowData(NOMBRE,ID); 

document.getElementById(ID).height=m[5];

document.getElementById(ID).width=m[4]+22;

} 

function addEvent(obj, evType, fn, useCapture){

 

 if (obj.addEventListener){

    obj.addEventListener(evType, fn, useCapture);

    

  } else if (obj.attachEvent){

    obj.attachEvent("on"+evType, fn);

   

  } else {

   obj['on'+evType]=fn;

  }

}

window.onload=function(){

    resizeIframe('pp','pp');

    addEvent(document.getElementById('pp'), 'load', function(){resizeIframe('pp','pp');}, false);

}

</script>

</head>

 
<body>

<iframe name="pp" id="pp" src="test2.php" frameborder="1" scrolling="no"></iframe></body>

</html>

millirules · #3 (**permalink**) 25/06/2008, 05:01

Muchisimas gracias!

Me fue muy util, y me has ahorrado muchos quebraderos de cabeza, ademas de leer muchos manuales!

Gracias otra vez!