Contenuto incorporato

7.1 Elemento <iframe>

L'elemento <iframe> in HTML è utilizzato per incorporare un altro documento HTML nel documento corrente. Questo permette di visualizzare il contenuto di altre pagine web all'interno del documento principale, creando la possibilità di integrare diverse risorse, come video, mappe, documenti e altre pagine web.

L'elemento <iframe> crea un frame incorporato che può visualizzare un altro documento HTML. Questo documento può essere caricato da qualsiasi URL e funzionare indipendentemente dal documento principale.

Sintassi:

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

Esempio di utilizzo:

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

Attributi

• src: URL del documento che verrà caricato nell'<iframe>
• width: larghezza del frame (può essere indicata in pixel o percentuali)
• height: altezza del frame (può essere indicata in pixel o percentuali)
• title: breve descrizione del contenuto del frame (importante per l'accessibilità)
• name: nome del frame, che può essere utilizzato per targeting di link e form
• sandbox: imposta restrizioni per il contenuto del frame, aumentando la sicurezza
• allow: determina quali funzioni possono essere utilizzate nell'<iframe> (ad esempio, allowfullscreen per la modalità a schermo intero)

7.2 Attributo allowfullscreen

L'attributo allowfullscreen consente di abilitare la modalità a schermo intero per il contenuto caricato nell'<iframe>. Senza questo attributo, il contenuto non sarà in grado di passare alla modalità a schermo intero.

Sintassi:

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

Esempio di utilizzo:

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

La modalità a schermo intero permette all'utente di visualizzare video o altre risorse in modalità a schermo intero, migliorando l'esperienza utente.

7.3 Attributo allow

L'attributo allow definisce quali funzioni possono essere utilizzate nell'<iframe>, come accesso alla geolocalizzazione, videocamera, microfono e modalità a schermo intero.

Sintassi:

    
      allow="geolocation; microphone; camera; fullscreen"
    
  

Esempio di utilizzo:

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

Vantaggi:

• Controllo sulla funzionalità: permette di specificare quali funzioni e API possono essere utilizzate dal contenuto incorporato
• Gestione dei permessi: offre flessibilità nella gestione dell'accesso a diverse funzioni come geolocalizzazione e videocamera

7.4 Attributo sandbox

L'attributo sandbox è utilizzato per applicare restrizioni al contenuto caricato nell'<iframe>. Previene l'esecuzione di certe azioni, come l'esecuzione di script o l'apertura di finestre popup, migliorando così la sicurezza.

Sintassi:

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

Valori dell'attributo sandbox:

• allow-forms: permette l'invio di form
• allow-modals: permette l'uso di finestre modali
• allow-orientation-lock: permette il blocco dell'orientamento dello schermo
• allow-pointer-lock: permette il blocco del puntatore
• allow-popups: permette l'apertura di finestre popup
• allow-popups-to-escape-sandbox: permette alle finestre popup di uscire dalla sandbox
• allow-presentation: permette l'accesso all'API delle presentazioni
• allow-same-origin: permette l'esecuzione di script dalla stessa origine
• allow-scripts: permette l'esecuzione di script
• allow-storage-access-by-user-activation: permette l'accesso allo storage tramite attivazione dell'utente
• allow-top-navigation: permette la navigazione di livello superiore
• allow-top-navigation-by-user-activation: permette la navigazione di livello superiore tramite attivazione dell'utente

Esempio di utilizzo:

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

Vantaggi:

• Sicurezza: previene l'esecuzione di script potenzialmente dannosi e limita la funzionalità del contenuto incorporato
• Controllo dell'accesso: permette ai sviluppatori di specificare esattamente quali funzionalità sono permesse per il contenuto incorporato

7.5 Attributo loading

L'attributo loading controlla come l'<iframe> viene caricato, permettendo di ritardare il caricamento fino a quando l'elemento non è visibile sullo schermo (lazy loading).

Valori dell'attributo loading:

• lazy: ritarda il caricamento dell'<iframe> fino a quando l'elemento non è visibile
• eager: il caricamento dell'<iframe> avviene immediatamente, indipendentemente dalla sua visibilità

Sintassi:

    
      loading="stato"
    
  

Esempio di utilizzo:

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

Vantaggi:

• Ottimizzazione delle prestazioni: il caricamento lento riduce la quantità di dati caricati e accelera il tempo di caricamento della pagina
• Riduzione dell'uso delle risorse: permette di caricare solo gli elementi che l'utente vede e utilizza realmente