Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
[TUTORIAL] Iframe Autoajustable
#1
Pues nada, si queréis que un iframe de vuestra web se autoajuste en altura y anchura, aquí os presento el script con su solución.

Código:
<!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>

Esto en un archivo.js o en el head de la página

Código:
<body>
<iframe name="pp" id="pp" src="test2.php" frameborder="1" scrolling="no"></iframe></body>
</html>

Y esto en el iframe
elCSS.com
[Imagen: 33jsqk6.png]
Crece con nosotros || Síguenos en Twitter - Facebook - RSS
WWW
#2
Muchas gracias... Es interesante...

Por cierto, añado al post la etiqueta de [TUTORIAL]
[Imagen: firmatwitter.png][Imagen: firmataq.png]
WWW
#3
Perfecto pues, es interesante, y si tienes que utilizar un iframe (como me paso a mi por obligacion) es muy dificil de encontrar jaja
elCSS.com
[Imagen: 33jsqk6.png]
Crece con nosotros || Síguenos en Twitter - Facebook - RSS
WWW
#4
Gracias por el aporte, compañero
WWW
#5
Para eso estamos.
Mañan igual os subo como hacer un iframe que el fondo se vuelva transparente automaticamente.
elCSS.com
[Imagen: 33jsqk6.png]
Crece con nosotros || Síguenos en Twitter - Facebook - RSS
WWW
#6
Yo sé como hacer que el fondo de una web haga un degradado de negro a blanco, como lo que se llama en el cine un fundido a negro, pero invertido, aunque también puedo hacerlo para que lo haga al revés, es decir de blanco a negro...
[Imagen: firmatwitter.png][Imagen: firmataq.png]
WWW
#7
Ya yo tb, buscando sobre este tema lo encontre, es relativamente sencillo, y aparte de blanco a negro o viceversa, se puede hacer con muchos tipos de colores.
elCSS.com
[Imagen: 33jsqk6.png]
Crece con nosotros || Síguenos en Twitter - Facebook - RSS
WWW
#8
Cierto... O también con imágenes y lo que quieras Gran sonrisa
[Imagen: firmatwitter.png][Imagen: firmataq.png]
WWW
#9
También también jaja
elCSS.com
[Imagen: 33jsqk6.png]
Crece con nosotros || Síguenos en Twitter - Facebook - RSS
WWW


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  Introducción a Adobe Illustrator Tutorial para Principiantes J'orge20 2 287 22-10-2015, 05:46 PM
Último mensaje: GadesMetal
  Tutorial efectos I (By lalit0) lalit0 3 434 11-11-2014, 03:25 PM
Último mensaje: Alesso
  Tutorial Photoshop - Retoque Fotografico danesth 0 374 08-08-2014, 04:57 PM
Último mensaje: danesth
  [Tutorial] Assassin Signature Ignacio P. 0 343 12-06-2013, 04:55 AM
Último mensaje: Ignacio P.
  [Video Tutorial] Cyborn Firma Finer 7 817 03-06-2013, 11:32 PM
Último mensaje: cep999
  [Video Tutorial] Venom Firma Finer 3 508 03-06-2013, 07:55 PM
Último mensaje: Joseahfer
  [Tutorial] Starcraft Finer 3 447 29-03-2013, 03:39 PM
Último mensaje: Orphen Nightford
  Tutorial Cinema 4D - Geometría de partículas Ibancius 3 884 27-03-2013, 07:37 PM
Último mensaje: romeho
  Tutorial Photoshop CS6 - Efecto texto laminado azul Ibancius 7 1.456 27-03-2013, 07:25 PM
Último mensaje: romeho
  Tutorial Composición Navideña - Cinema 4D & Photoshop new-infinit 6 695 09-03-2013, 03:38 AM
Último mensaje: meisterbrake



Usuarios navegando en este tema: 1 invitado(s)