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.
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.
iframe HTML - Cómo mostrar una página externa dentro de HTML
Agregar Mapas de Google, video de YouTube, audios, recorridos virtuales, etc.
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
Atributos 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. |
ChatGPT Gratis
Realiza preguntas sobre cualquier tema
¡Participa!
¡Compártelo en tus Redes Sociales!CITAR ARTÍCULO
Para tareas, investigaciones, tesis, libros, revistas, blogs ó artículos académicos
Referencia en Formato APA:
Delgado, Hugo. (2019).
iframe HTML - Cómo mostrar una página externa dentro de HTML.
Recuperado 18 de November, 2024, de
https://disenowebakus.net/iframe.php
CONTINÚA APRENDIENDO
TAMBIÉN MERECE LA PENA VISITAR:
Para crear una página web se necesita un documento HTML utilizando tres elementos o tags...
La Web surgió con navegadores básicos que sólo interpretaban texto, después apareció HTML...
Los tags div y span no tienen ningún significado especial, sólo que la primera se define como un...
HTML utiliza el elemento ancla (Etiqueta a) para crear un enlace. Cuando un visitante hace clic en...
¿Todavía no encuentras lo que necesitas?
Usa nuestro buscador interno para descubrir más informaciónContenido relacionado:
1 Comentario en "iframe HTML - Cómo mostrar una página externa dentro de HTML"
Deja tu Comentario
PATROCINADOR
Tu negocio también puede aparecer aquí. Más información
Muy buen artículo.