Página 1 de 1

Iframe Autoajustable (se ajusta automaticamente al tamaño)

PublicadoCOLON 26 Dic 2009 12:03
por Klk3
Buenas chicos llevo ya 3 días para conseguir que este código funcione y buscando mucho lo encontré!
Lo que hace es que tu tienes un iframe y al hacer que alguna web se abra dentro de este, se ajusta automaticamente al tamaño de la web.

Entre <head> y </head> pon esto:

CódigoColon Seleccionar todo

<script>
function ajustar() {
document.getElementById("prueba").style.height = window.frames.prueba.document.body.style.
height;
}
function ini() {
document.getElementById("prueba").height = document.frames.prueba.document.body.offsetHeight + document.frames.prueba.document.body.scrollHeight;
}

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>


y el iframe será así

CódigoColon Seleccionar todo

<iframe id="NOMRE DEL IFRAME" name="NOMBRE DEL IFRAME" src="body11.html" with="480" onload="ini()" width="1124" height="150" border="0" frameborder="0" target="Iframe"></iframe>



Recuerda que para que esto funcione, la web que has abrir en el iframe ha de ser del mismo servidor donde esté este, por ejemplo si lo pones en una web de palimpalem el link al iframe será body11.html solo eso,

saludos

PD: es un código extraído de internet el cual he modificado un poco para que vaya en todos lo navegadores

Re: Iframe Autoajustable (se ajusta automaticamente al tamaño)

PublicadoCOLON 26 Dic 2009 18:13
por Ivan
ya lo he añadido a favoritos ;)

Re: Iframe Autoajustable (se ajusta automaticamente al tamaño)

PublicadoCOLON 26 Dic 2009 18:30
por Klk3
funciona perfectamente, pero en IE hay gente que no le acaba de funcionar, veré de arreglarlo

Re: Iframe Autoajustable (se ajusta automaticamente al tamaño)

PublicadoCOLON 27 Dic 2009 23:09
por carlitos
yo lo tube que usar hace 6 meses para a web de una empresa... hasta que lo encontré.. uf !!

El mio funciona con todos los navegadores, creo! Pero nose.. xdd

Re: Iframe Autoajustable (se ajusta automaticamente al tamaño)

PublicadoCOLON 28 Dic 2009 00:13
por Klk3
postealo siempre va bien tener de mas