Inicio » Programacion » HTML » Articulos HTML

iframes (HTML)

iframes.

El HTML dispone de un elemento llamado iframe que permite disponer un frame con el flujo de la página, similar a disponer una imagen en la página.

Veamos un ejemplo como disponer este tipo de frame tan particular:

pagina1.html

<html>
<head>
<title>prueba de iframes</title>
</head>
<body>
<h1>Esto es una prueba de un iframe</h1>
<iframe src="pagina2.html" width="400" height="200">
No tiene disponible el navegador la capacidad de iframe
</iframe>
<h2>Esto ya está fuera del iframe</h2>
</body>
</html>

Como podemos ver cuando necesitamos agregar el iframe dentro de la página disponemos:

<iframe src="pagina2.html" width="400" height="200">
No tiene disponible el navegador la capacidad de iframe
</iframe>

Le indicamos el ancho y alto que debe tomar el iframe, la ubicación continúa el flujo de la página.

La página que muestra el iframe no introduce ningún concepto nuevo:

<html>
<head>
<title>prueba de iframes</title>
</head>
<body>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
</body>
</html>

Algunas propiedades útiles aplicables a un iframe:

  • src Archivo a mostrar dentro del iframe.
  • width Ancho en píxeles.
  • height Alto en píxeles.
  • frameborder Podemos asignarle los valores 1 o 0. Si vale 0 el borde no se muestra.
  • scrolling Los valores posibles de esta propiedad son: "auto","yes","no". Por defecto está inicializada con el valor "auto". El valor auto significa que el navegador decide si se debe mostrar la barra de scroll. La mostrará solo si algún contenido del iframe no se ve.
    Si definimos el valor "yes" estamos indicando que siempre debe estar visible la barra de navegación y por último si asignamos el valor "no" estaremos indicando que nunca debe aparecer la barra de navegación para dicho iframe.
  • name Nombre del iframe si queremos acceder desde otra página. Por ejemplo si queremos actualizar su contenido desde un enlace ubicado en otra página.