IFRAME : COMO CREAR UN CONTENDOR IFRAME AUTO AJUSTABLE EN ANCHO Y ALTO.

Como están amigos lectores de TECNOCIENCIA, en esta ocasión les traigo este nuevo post titulado : “IFRAME : COMO CREAR UN CONTENDOR IFRAME AUTO AJUSTABLE EN ANCHO Y ALTO”.

Si no sabes de que se trata pues te explico rápidamente que un IFRAME es un contenedor que podemos alojar en una pagina para que luego dentro de el podamos mostrar otras distintas paginas sin tener que abrir nuevas ventanas.

Esto es muy útil cuando tenemos por ejemplo un sistema con muchos módulos, pues evita que llenemos el navegador de nuevas pestañas y a la ves que se genere un desorden visual.

APLICACION DE UN IFRAME EN UN SISTEMA DE PRUEBAS.

Para poder ver lo útil que puede ser un IFRAME vamos a realizar un pequeño sistema el cual constara de 3 paginas:

  1. admin_iframe.html
  2. pagina_img.html
  3. pagina_form.html

La pagina principal que se llamara “admin_iframe.html” contendrá un menú con 2 botones y por su puesto debajo de ese menú estará el contenedor IFRAME que recibirá las paginas que serán llamadas por los botones del menú.

Esta pagina tendrá el siguiente aspecto:

admin_iframe.html

El código de esta pagina es el siguiente:

<!DOCTYPE html>
<html>
  
<head>
  <title>IFRAME PRUEBAS</title>
	<link rel="stylesheet"  type="text/css" 	href="total/css_table/main.css">

<!--======================== ESTE ES EL ESTILO PARA LOS BOTONES =============-->	      
    <style>
		body {
		font-family: Arial;
			 }

		* {
  		box-sizing: border-box;
		}
		form.example input[type=text] {
  		padding: 10px;
  		font-size: 17px;
  		border: 1px solid grey;
  		float: left;
  		width: 80%;
  		background: #f1f1f1;
		}
		form.example button {
  		float: left;
  		width: 20%;
  		padding: 10px;
  		background: #2196F3;
  		color: white;
  		font-size: 17px;
  		border: 1px solid grey;
  		border-left: none;
  		cursor: pointer;
		}
		form.example button:hover {
  		background: #0b7dda;
		}
        form.example::after {
  		content: "";
  		clear: both;
  		display: table;
		}
  		h1 {text-align: center;}
  		h2 {text-align: center;}
  		p {text-align: center;}
        iframe{
        width: 100%;
        border: 2px solid #ccc;
    	}
   
    </style>
  
	</head>
<!--======================== ESTE ES EL ESTILO PARA LOS BOTONES =============-->      
	<body> 
  
 		<div class="limiter">
		<div class="container-table100">
		<div class="wrap-table100"> 
 		<h1>IFRAME AUTOAJUSTABLE : TECNOCIENCIA PERU</h1>
        <br>

         <div id="wrap">
		 <div id="header">
		 <p align="center">
   

         <form class="example" target="iframe_box"  method="post"  action="" style= " margin-left: auto; margin-right: auto; width: 425px;">  

         <button style= " margin: 5px; width: 200px; background-color: #4CAF50 " type="submit" onclick="javascript: form.action='pagina_img.html';">Pagina Imagen</button>
         <button style= " margin: 5px; width: 200px; background-color: #4CAF50 " type="submit" onclick="javascript: form.action='pagina_form.html';">Pagina Fomulario</button>
         </form>               
        
        </div>
		</div>
       
        <div align="center"> <iframe name="iframe_box" id="iframe_box" class="iframe" scrolling="no" frameborder="0" ></iframe> </div>
        <script> 
        var div = document.getElementById("iframe_box"); 
        div.onload = function() 
        { 
          
         div.style.height = div.contentWindow.document.body.scrollHeight + 'px'; 

         div.style.width =  div.contentWindow.document.body.scrollWidth+'px';
        
        } 
    	</script> 
          
     	</div>
  		</div>
		</div>
</body>
</html>

La pagina “pagina_img.html” contendrá una imagen la cual se mostrara dentro del IFRAME cuando se presiona el botón: PAGINA IMAGEN.

El resultado que veríamos seria el siguiente :

como vemos el la pagina de imagen se ajusta perfecto al ancho y alto de su contenido.

El código de esta pagina seria el siguiente:

<!DOCTYPE html>
<html lang ="en">

<head>
<meta http-equiv = "Content-Type" content = "text / html; charset = utf-8">
<title> Página para iFrame </title>

<style>
  
  /* HACE QUE EL IFRAME AJUSTE EL ANCHO AL  CONTENIDO DE LA PAGINA */  
  
   .contenedor
   {
   width: 400px;
   margin: 0 auto;
   margin-bottom:10px;
   }
  
  /* HACE QUE TODO EL CONTENIDO QUEDE CENTRADO DENTRO DE LA PAGINA */    
   
    .centrador 
    {
    height:90PX;
    width:90PX;
    text-align:center;
    display: table-cell;
    vertical-align:middle;
    }
  

  /* HACE QUE EL IFRAME AJUSTE EL ANCHO AL  CONTENIDO DE LA PAGINA */  
  
   body
   {
   display: inline-block;
   margin-left:auto;
   margin-right:auto;
   }
     
</style>
</head>  
  
 
  
<body style = "margin-top:0; background-color:powderblue" >
   
<div class="contenedor" > 
  
<h1 style="margin-top:0; text-align:center; letter-spacing:1px; color:blue; font-family:verdana;"> Estoy dentro de un Iframe! </h1>


<div class="centrador"  style="width:900px;" > 
<center> 
<!-- COLOCAR AQUI LO QUE QUERRAS IMAGENES O TABLAS -->
  
  <img src="total/images/teslaimg.jpeg">
  
<!----- FIN DEL ESPACIO CENTRADO PARA CONTENIDO  ---->  
</center> 
</div>
  

</div> 
</body> 
</html>

Ahora finalmente si llamamos a la pagina “pagina_form.html” mediante el botón PAGINA FORMULARIO, el resultado seria el siguiente :

El código de esta pagina es el siguiente:

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>FORMULARIO DE PRODUCTOS</title>
<!--======================================= ESTILO DE LA TABLA PLOMO ==============================-->        
<link rel="stylesheet" type="text/css" href="total/ccs_form/view.css" media="all">

<script type="text/javascript" src="total/js_calendar/calendar.js"></script>
  
<style>
  
  /* HACE QUE EL IFRAME AJUSTE EL ANCHO AL  CONTENIDO DE LA PAGINA */  
     body
   {
   display: inline-block;
   margin-left:auto;
   margin-right:auto;
   }

</style>
  </head>

  <body id="main_body" >
  
  <img id="top" src="top.png" alt="">
	<div id="form_container">
	
		<h1><a>FORMULARIO DE PRODUCTOS</a></h1>
          <form id="form_18653" class="appnitro"  method="post" action="registrar_producto.php">
					<div class="form_description">
                      <h2>FORMULARIO PARA REGISTRO DE PRODUCTOS</h2>
			<p>Base de datos DBPRUEBAS</p>
		</div>						
			<ul >
			
					<li id="li_1" >
		<label class="description" for="element_1">CODIGO ID : </label>
		<div>
			<input id="element_1" name="element_1" class="element text small" type="text" maxlength="255" value=""/> 
		</div> 
		</li>		<li id="li_2" >
		<label class="description" for="element_2">NOMBRE DEL PRODUCTO : </label>
		<div>
			<input id="element_2" name="element_2" class="element text medium" type="text" maxlength="255" value=""/> 
		</div> 
		</li>		<li id="li_3" >
		<label class="description" for="element_3">NUMERO DE SERIE : </label>
		<div>
			<input id="element_3" name="element_3" class="element text medium" type="text" maxlength="255" value=""/> 
		</div> 
		</li>		<li id="li_4" >
		<label class="description" for="element_4">FECHA DE INGRESO : </label>
		<span>
			<input id="element_4_1" name="element_4_1" class="element text" size="2" maxlength="2" value="" type="text"> /
			<label for="element_4_1">MM</label>
		</span>
		<span>
			<input id="element_4_2" name="element_4_2" class="element text" size="2" maxlength="2" value="" type="text"> /
			<label for="element_4_2">DD</label>
		</span>
		<span>
	 		<input id="element_4_3" name="element_4_3" class="element text" size="4" maxlength="4" value="" type="text">
			<label for="element_4_3">YYYY</label>
		</span>
	
		<span id="calendar_4">
			<img id="cal_img_4" class="datepicker" src="total/js_calendar/calendar.gif" alt="Pick a date.">	
		</span>
		<script type="text/javascript">
			Calendar.setup({
			inputField	 : "element_4_3",
			baseField    : "element_4",
			displayArea  : "calendar_4",
			button		 : "cal_img_4",
			ifFormat	 : "%B %e, %Y",
			onSelect	 : selectDate
			});
		</script>
		 
		</li>
			
					<li class="buttons">
			    <input type="hidden" name="form_id" value="18653" />
			    
				<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
		</li>
			</ul>
		</form>	
  </div>
  <br>
  </body>
</html>

Si cargas esos 3 elementos tu sistema de menú con IFRAME autoajustable ya funcionaria correctamente, sin embargo para que tenga los colores y formatos de letras que ves en el ejemplo deberás cargar adicionalmente la carpeta TOTAL.

Entonces nuestro sistema contaría con los siguientes elementos:

Este es el link de descarga de todos los archivos:

MENU CON IFRAME AUTOAJUSTABLE

COMO FUNCIONA EL IFRAME ?

El funcionamiento de este IFRAME se debe al siguiente codigo insertado en la pagina principal del sistema:

        <div align="center"> <iframe name="iframe_box" id="iframe_box" class="iframe" scrolling="no" frameborder="0" ></iframe> </div>
        
        <script> 
        var div = document.getElementById("iframe_box"); 
        div.onload = function() 
        { 
         div.style.height = div.contentWindow.document.body.scrollHeight + 'px'; 

         div.style.width =  div.contentWindow.document.body.scrollWidth+'px';
        } 
    	</script> 

Luego en las paginas que se colocaran dentro del IFRAME se debe agregar el siguiente código de estilo el cual facilita a que el IFRAME redimensione o ajuste su tamaño al contenido de esa pagina.

<style>
  
  /* HACE QUE EL IFRAME AJUSTE EL ANCHO AL  CONTENIDO DE LA PAGINA */  
  
   .contenedor
   {
   width: 400px;
   margin: 0 auto;
   margin-bottom:10px;
   }
  
  /* HACE QUE TODO EL CONTENIDO QUEDE CENTRADO DENTRO DE LA PAGINA */    
   
    .centrador 
    {
    height:90PX;
    width:90PX;
    text-align:center;
    display: table-cell;
    vertical-align:middle;
    }
  

  /* HACE QUE EL IFRAME AJUSTE EL ANCHO AL  CONTENIDO DE LA PAGINA */  
  
   body
   {
   display: inline-block;
   margin-left:auto;
   margin-right:auto;
   }
     
</style>

Todo esto obviamente ya esta insertado dentro de las paginas de nuestro sistema.

Si deseas agregar tu propio contenido debes asegurarte de que todas las paginas que coloques también contengan estos estilos.

Eso ha sido todo amigos en este post ” IFRAME : COMO CREAR UN CONTENDOR IFRAME AUTO AJUSTABLE EN ANCHO Y ALTO ” esperamos que esta info en algún momento te se a de utilidad.

Recuerda que una manera de ayudarnos o agradecer nuestro trabajo es visitando los anuncios que aparecen a lo largo del post. Gracias!

Recuerda tambien que puedes visitar todo el contenido de nuestro blog en :

BLOG DE TECNOCIENCIA.

Tambien puedes visitar nuestro canal de youtube en :

CANAL DE YOUTUBE TECNOCIENCIA

https://www.tecnocienciaperu.com/blog/

https://www.youtube.com/c/MarcosAguilar_mks/videos?view_as=subscriber

Agregue un comentario

Su dirección de correo no se hará público. Los campos requeridos están marcados *