iframe HTML - Cómo mostrar una página externa dentro de HTML

frame, iframe o también conocido como marco, sirve para insertar un video de Youtube y elementos multimedia dentro de la página Web actual.

iframe HTML - Cómo mostrar una página externa dentro de HTML | Aprender HTML | frame, iframe o también conocido como marco, sirve para insertar un video de Youtube y elementos multimedia dentro de la página Web actual
COMPÁRTELO:

Potente, pero fácil de usar mal

En los viejos tiempos del diseño de sitios web, había muchos elementos <frame> dando vueltas, arruinando el día de todos.

Casi siempre fueron un mal enfoque del diseño. Afortunadamente, el elemento <frame> ha quedado en desuso en HTML5, pero el <iframe> o "marco en línea" todavía está disponible. ¿Debería haber quedado en desuso también? ¿Es mejor simplemente evitarlo?

Hay algunos usos válidos para este elemento, pero realmente necesitas entender qué es y cómo funciona para evitar algunos de los escollos que eran tan comunes en los tiempos oscuros de la Web.

Similitudes y diferencias entre <iframe> y <frame>

Ambos elementos representan un documento HTML independiente. El contenido del documento se referencia en el atributo src de cada elemento, por lo que en realidad es un recurso totalmente independiente al que se hace referencia desde el documento actual.

<iframe src="https://ejemplo.com"></iframe>
<iframe>
	<!DOCTYPE html>
	<html>
		<head>   .   .   .   </head>
		<body>  .   .   .   </body>
	</html>
</iframe>

La principal diferencia entre <iframe> y <frame> es que <iframe> implementa esto de una manera que tiene sentido, que respeta lo que es un documento HTML en primer lugar. El contenido del <iframe> se muestra dentro de un elemento que es claramente una parte del documento actual.

Por ejemplo, considere este video incrustado de YouTube:

<iframe width="560" height="315" src="https://www.youtube.com/embed/M2kSJbLbIgQ" frameborder="0" allowfullscreen></iframe> 

El video está claramente en la página, no en un panel separado en otro lugar.

El elemento <frame> rompió este paradigma y permitió que el documento ejerciera el control sobre la ventana del navegador, dividiéndolo en varios paneles más pequeños (marcos), cada uno de los cuales mostraba un documento diferente. (Fue terrible.) Todas las otras diferencias entre <frame> y <iframes> provienen de esta diferencia básica.

No vuelva a crear diseños basados ​​en marcos con iframe

Es posible que tenga la tarea de actualizar o rediseñar un sitio web antiguo que se construyó con marcos. Y luego puede sentirse tentado a utilizar <iframes> y un diseño de ancho fijo para recrear la misma pesadilla de los paneles y subventanas independientes.

Luego descubrirá que no puede usar el atributo de destino para abrir un enlace en un marco en particular. Eso debería detenerlo, pero luego puede comenzar a buscar soluciones de JavaScript y despues reconstruir algo terrible. Por favor no hagas esto.

Usos buenos (y terribles) para <iframe>

Hay algunos usos legítimos para <iframe>, y la imitación de patrones de diseño terribles de la década de 1990 no es uno de ellos. Aquí hay algunos:</iframe>

  • Incrustación de medios de terceros
  • Incrustar sus propios medios de una manera independiente del documento
  • Incrustar ejemplos de código (lo hacemos en este sitio)
  • Incrustando "applets" de terceros como formas de pago

Y aquí hay algunos usos terribles para <iframe>

  • Galería de fotos
  • Foro o chat

Básicamente, si necesita incrustar un documento HTML ya existente e independiente en el documento actual, use un <iframe>. Si está construyendo todo desde cero, casi no hay una buena razón para dividir el diseño de una página en varios documentos independientes, especialmente si en realidad no son piezas independientes de contenido.

Versiones de navegadores complatibles con iframe

Navegadores que Soportan el Tag iframe

Atrributos para el iframe

Nombre del atributo Notas
sanbox Coloca un conjunto de restricciones de seguridad y usabilidad en el iframe.
scrolling Se usaba para alternar el desplazamiento en iframes. En desuso en HTML5. Utilice CSS en su lugar.
name Especifica el nombre de un iframe.
align Se utilizó para establecer la alineación de un marco con respecto a los elementos circundantes. Actualmente obsoleto. Utilice CSS en su lugar.
frameborder Se utilizó para alternar la visualización de un borde alrededor de un iframe. En desuso en HTML5. Utilice CSS en su lugar.
longdesc Se utilizó para especificar la URL que contiene una descripción larga de un iframe. En desuso en HTML5. Utilice CSS en su lugar.
marginwidth Se utilizó para controlar el ancho de los márgenes alrededor de un iframe. En desuso en HTML5. Utilice CSS en su lugar.
src Especifica la URL de un documento para mostrar en un iframe.
vspace Se utilizó para controlar el espaciado vertical alrededor de un iframe. En desuso en HTML5. Utilice CSS en su lugar.
width Especifica el ancho de un iframe.

¿Te gustó o fue útil?

¡Compártelo con tus amigos en Redes Sociales!
Compártelo:

Profesor en la Universidad de Guadalajara

Hugo Delgado Desarrollador y Diseñador Web en Puerto Vallarta

Profesional en Desarrollo Web y Posicionamiento SEO desde hace más de 10 años continuos.
Contamos con más de 200 constancias y reconocimientos en la trayectoria Académica y Profesional, incluidos diplomados certificados por Google.

TAMBIÉN MERECE LA PENA VISITAR:

¿Todavía no encuentras lo que necesitas?

Usa nuestro buscador interno para descubrir más información
Contenido patrocinado:

¿Te gustaría aprender más sobre Diseño Web?

Conoce las palabras y términos más comúnes usados en el Mundo de Internet para la World Wide Web
Glosario de Internet
 

Deja tu Comentario

PATROCINADOR

Tu negocio también puede aparecer aquí. Más información