Entonces, fue fácil y divertido ¿verdad? Los elementos <iframe> están diseñados para permitirte incrustar documentos web en el documento actual. Esto es excelente para incorporar contenido de terceros en tu sitio web sobre el que no tengas control directo y no quieras tener que implementar tu propia versión — como vídeo de proveedores de vídeo en línea, sistemas de comentarios como Disqus, mapas de proveedores de mapas en línea, banners publicitarios, etc. Los ejemplos editables que has estado usando a través de este curso se implementan usando <iframe>s.
Hay algunos serios Security concerns a considerar con <iframe>s, también se discute a continuación, pero esto no significa que debas dejar de usarlos en tus sitios web — solo requiere un poco de conocimiento y pensar cuidadosamente. Vamos a explorar el código con un poco más de detalle. Supongamos que quieres incluir el glosario de MDN en una de tus páginas web — podrías intentar algo como esto:
.png)
Este ejemplo incluye los elementos básicos necesarios para usar un <iframe>:
Si está configurado, el <iframe> se puede colocar en modo pantalla completa usando el Full Screen API (El uso del API está fuera del alcance de este artículo.)
Si se establece en 1, esto le indica al navegador que dibuje un borde entre este marco y otros marcos, que es el comportamiento predeterminado. 0 elimina el borde. Usar esto ya no es realmente recomendable, ya que el mismo efecto se puede lograr mejor usandoborder: none; en tu CSS.
Este atributo, como con <video>/<img>,contiene una ruta que apunta a la URL del documento que se va a incrustar.
Estos atributos especifican el ancho y la altura (width y height) que quieres que tenga el iframe.
Contenido de reserva
De la misma manera que otros elementos similares <video>, puedes incluir contenido alternativo entre las etiquetas de apertura y cierre <iframe></iframe> que aparecerán si el navegador no admite el <iframe>. En este caso hemos incluido un enlace a la página. Es poco probable que encuentres algún navegador que no admita <iframe>s en estos días.
Este atributo, que funciona en navegadores un poco más modernos que el resto de la funciones de <iframe> (por ejemplo IE 10 y superior) solicita una mayor configuración de seguridad; bueno, hablaremos más sobre esto en la siguiente sección.