iframe

Iframe (por inline frame o marco incorporado en inglés) es un elemento HTML que permite insertar o incrustar un documento HTML dentro de un documento HTML principal. Fue introducido en el navegador Microsoft Internet Explorer en 1997 y durante mucho tiempo solo fue soportado en este navegador, la etiqueta Iframe actualmente es ya aceptada por la W3 como un elemento estándar y es ampliamente soportado por gran variedad de navegadores.

<html>
  <head>
    <title>IFrames</title>
  </head>

  <body>
    <iframe src="http://www.example.com/" name="SubHtml"
      width="400" height="500" scrolling="auto" frameborder="1">
      <p>Texto alternativo para navegadores que no aceptan iframes.</p>
    </iframe>
  </body>
</html>

Los iFrames admiten diversos atributos como "AllowTransparency", que deberemos establecer a "true",

 <iframe src="paginaACargar.html"....AllowTransparency="true"....>,

que permite una visualización de la página mucho más atractiva; ya que, el fondo del iframe va a ser transparente, dejando ver el fondo original del archivo HTML principal. Para lo cual, habrá que poner el parámetro background:transparent, en la definición CSS de body, en la página a cargar en el <iframe src='paginaACargar.html'>.

paginaACargar.html

 <html>
  <head>
    <title>Página A Cargar.html con el iFrame</title>
  
   <Style.....>
    body {
      background:transparent;
      /* Algunos textos incluyen un filtro para el fondo Blanco, que es útil en iExplorer */
      filter:chroma(color=#FFFFFF);
    }
   </style>
  </head>
 ...
 ...
 </html>

En este ejemplo se incrusta un iframe cuyo contenido esta en la URL "http://www.example.com/". Se especifica el ancho de 400 píxeles (width="400") y un alto de 500 píxeles (height="500"). Si el contenido es más grande que el marco de la ventana, con "scrolling=auto" se activa la barra de desplazamiento para moverse dentro del iframe. La propiedad "frameborder" establece si el marco que contiene al iframe tiene borde o no. También se le denomina un nombre a la ventana con la propiedad "name" (name="SubHtml") con el que es posible hacer referencia al iframe para poder cambiar su dirección desde el html maestro.

Los documentos HTML también pueden incrustarse en otro documento a través del elemento object. Para más información sobre ello visita esta página (en inglés).

Por otro lado, el uso de iframes sirvió como inspiración de lo que hoy conocemos como AJAX, ya que cada parte de un documento html es independiente.

Referencias

Especificación del elemento IFrame de HTML 4.0 según W3C.</iframe>

Véase también

HTML

Datos: Q179526