Contenido incrustado

7.1 Elemento <iframe>

El elemento <iframe> en HTML se utiliza para incrustar otro documento HTML en el documento actual. Esto permite mostrar el contenido de otras páginas web dentro del documento principal, creando la posibilidad de integrar diversos recursos como videos, mapas, documentos y otras páginas web.

El elemento <iframe> crea un marco incrustado que puede mostrar otro documento HTML. Este documento puede ser cargado desde cualquier URL y funcionar de manera independiente del documento principal.

Sintaxis:

    
      <iframe src="URL"></iframe>
    
  

Ejemplo de uso:

    
      <iframe src="https://www.example.com" width="600" height="400" title="Ejemplo de iframe"></iframe>
    
  

Atributos

• src: URL de la dirección del documento que será cargado en el <iframe>
• width: ancho del marco (puede ser especificado en píxeles o porcentajes)
• height: altura del marco (puede ser especificado en píxeles o porcentajes)
• title: breve descripción del contenido del marco (importante para accesibilidad)
• name: nombre del marco, que puede ser usado para direccionar enlaces y formularios
• sandbox: establece restricciones para el contenido del marco, aumentando la seguridad
• allow: define qué funciones pueden ser utilizadas en el <iframe> (por ejemplo, allowfullscreen para el modo de pantalla completa)

7.2 Atributo allowfullscreen

El atributo allowfullscreen permite habilitar el modo de pantalla completa para el contenido cargado en el <iframe>. Sin este atributo, el contenido no podrá pasar a modo de pantalla completa.

Sintaxis:

    
      <iframe src="https://www.example.com" allowfullscreen></iframe>
    
  

Ejemplo de uso:

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

El modo de pantalla completa permite al usuario ver vídeos u otros recursos en pantalla completa, lo que mejora la experiencia del usuario.

7.3 Atributo allow

El atributo allow define qué funciones pueden ser utilizadas en el <iframe>, tales como acceso a geolocalización, cámara, micrófono y modo de pantalla completa.

Sintaxis:

    
      allow="geolocation; microphone; camera; fullscreen"
    
  

Ejemplo de uso:

    
      <iframe
        src="https://www.example.com"
        allow="geolocation; microphone; camera; fullscreen">
      </iframe>
    
  

Ventajas:

• Control sobre la funcionalidad: permite especificar qué funciones y API pueden ser utilizadas por el contenido incrustado
• Gestión de permisos: proporciona flexibilidad en la gestión del acceso a diversas funciones, como geolocalización y cámara

7.4 Atributo sandbox

El atributo sandbox se utiliza para aplicar restricciones al contenido cargado en el <iframe>. Previene la realización de acciones como la ejecución de scripts o la apertura de ventanas emergentes, aumentando así la seguridad.

Sintaxis:

    
      sandbox="allow-scripts allow-same-origin"
    
  

Valores del atributo sandbox:

• allow-forms: permite el envío de formularios
• allow-modals: permite el uso de ventanas modales
• allow-orientation-lock: permite el bloqueo de la orientación de la pantalla
• allow-pointer-lock: permite la captura del puntero
• allow-popups: permite la apertura de ventanas emergentes
• allow-popups-to-escape-sandbox: permite a las ventanas emergentes salirse de la sandbox
• allow-presentation: permite el acceso a la API de presentaciones
• allow-same-origin: permite la ejecución de scripts del mismo origen
• allow-scripts: permite la ejecución de scripts
• allow-storage-access-by-user-activation: permite el acceso al almacenamiento por activación del usuario
• allow-top-navigation: permite la navegación de nivel superior
• allow-top-navigation-by-user-activation: permite la navegación de nivel superior por activación del usuario

Ejemplo de uso:

    
      <iframe
        src="https://www.example.com"
        sandbox="allow-scripts allow-same-origin">
      </iframe>
    
  

Ventajas:

• Seguridad: previene la ejecución de scripts potencialmente maliciosos y limita la funcionalidad del contenido incrustado
• Control de acceso: permite a los desarrolladores especificar exactamente qué funciones están permitidas para el contenido incrustado

7.5 Atributo loading

El atributo loading controla cómo se carga el <iframe>, permitiendo retrasar la carga hasta que el elemento sea visible en la pantalla (carga diferida).

Valores del atributo loading:

• lazy: retrasa la carga del <iframe> hasta que el elemento sea visible
• eager: la carga del <iframe> ocurre inmediatamente, independientemente de su visibilidad

Sintaxis:

    
      loading="estado"
    
  

Ejemplo de uso:

    
      <iframe
        src="https://www.example.com"
        width="600"
        height="400"
        loading="lazy">
      </iframe>
    
  

Ventajas:

• Optimización del rendimiento: la carga diferida reduce la cantidad de datos cargados y acelera el tiempo de carga de la página
• Reducción del uso de recursos: permite cargar solo los elementos que el usuario realmente ve y utiliza