Indice

<iframe>: l'elemento "Frame Inline"

L'elemento HTML <iframe> rappresenta un contesto di navigazione nidificato , incorporando un'altra pagina HTML in quella corrente.

Ciascun contesto di navigazione incorporato ha la propria cronologia delle sessioni e il proprio documento. Il contesto di navigazione che incorpora gli altri è chiamato contesto di navigazione padre. Il contesto di navigazione "più in alto", quello senza genitore, è solitamente la finestra del browser, rappresentata dall'oggetto Window.

Avvertenza: poiché ogni contesto di navigazione è un ambiente di documenti completo, ogni <iframe> in una pagina richiede maggiore memoria e altre risorse di elaborazione. Mentre in teoria puoi usare tutti gli <iframe> che vuoi, controlla i problemi di prestazioni.

Attributi

allow

Specifica un criterio di funzionalità per <iframe>. La policy definisce quali funzionalità sono disponibili per <iframe> in base all'origine della richiesta (es. accesso al microfono, fotocamera, batteria, API di condivisione web, ecc.).

allowfullscreen

Impostare su true se con <iframe> è possibile attivare la modalità a schermo intero chiamando il metodo requestFullscreen().

Nota: questo attributo è considerato un attributo legacy e ridefinito come allow="fullscreen".

allowpaymentrequest

Impostare su true se un'origie incrociata di <iframe> deve essere autorizzata a chiamare l'API di richiesta di pagamento.

Nota: questo attributo è considerato un attributo legacy e ridefinito come allow="payment"

fetchpriority

Fornisce un suggerimento sulla priorità relativa da utilizzare durante il recupero del documento iframe. Valori consentiti:

high

Segannala un recupero ad alta priorità rispetto ad altri documenti iframe.

low

Segnala un recupero a bassa priorità rispetto ad altri documenti iframe.

auto

Predefinito: segnala la determinazione automatica della priorità di recupero rispetto ad altri documenti iframe.

height

L'altezza del frame in pixel CSS. L'impostazione predefinita è 150.

loading

Indica come il browser dovrebbe caricare l'iframe:

  • eager: carica l'iframe immediatamente, indipendentemente dal fatto che si trovi al di fuori della finestra visibile (questo è il valore predefinito).

  • lazy: rinvia il caricamento dell'iframe finché non raggiunge una distanza calcolata dal viewport, come definita dal browser.

name

Un nome targetizzabile per il contesto di navigazione incorporato. Questo può essere utilizzato targetnell'attributo degli elementi <a>, <form>, o <base>; l'attributo formtarget degli elementi <input> o <button>; o il parametro windowName nel metodo window.open().

referrerpolicy

Indica quale referrer inviare durante il recupero della risorsa del frame:

  • no-referrer: L'intestazione Referer non verrà inviata.

  • no-referrer-when-downgrade: l'intestazione Referer non verrà inviata a origini senza TLS ( HTTPS ).

  • origin: Il referrer inviato sarà limitato all'origine della pagina referente: il suo schema , host e porta .

  • origin-when-cross-origin: il referrer inviato ad altre origini sarà limitato allo schema, all'host e alla porta. Le navigazioni sulla stessa origine includeranno comunque il percorso.

  • same-origin: verrà inviato un referrer per la stessa origine , ma le richieste cross-origin non conterranno informazioni sul referrer.

  • strict-orirgin: Invia l'origine del documento come referrer solo quando il livello di sicurezza del protocollo rimane lo stesso (HTTPS→HTTPS), ma non inviarlo a una destinazione meno sicura (HTTPS→HTTP).

  • strict-origin-when-cross-origin: (impostazione predefinita): invia un URL completo quando si esegue una richiesta della stessa origine, invia l'origine solo quando il livello di sicurezza del protocollo rimane lo stesso (HTTPS→HTTPS) e non invia alcuna intestazione a una destinazione meno sicura (HTTPS→HTTP).

  • unsafe-url: Il referrer includerà l'origine e il percorso (ma non il frammento , la password o il nome utente ). Questo valore non è sicuro, perché perde origini e percorsi dalle risorse protette da TLS a origini non sicure.

sandbox

Applica restrizioni aggiuntive al contenuto nel frame. Il valore dell'attributo può essere vuoto per applicare tutte le restrizioni o token separati da spazi per revocare particolari restrizioni:

  • allow-downloads-without-user-activation: consente che i download avvengano senza un gesto dell'utente.

  • allow-downloads: consente che i download avvengano con un gesto dell'utente.

  • allow-forms: consente alla risorsa di inviare moduli. Se questa parola chiave non viene utilizzata, l'invio del modulo viene bloccato.

  • allow-modals: consente alla risorsa di aprire le finestre modali.

  • allow-orientation-lock: consente alla risorsa di bloccare l'orientamento dello schermo .

  • allow-pointer-lock: consente alla risorsa di utilizzare l' API Pointer Lock .

  • allow-popups: consente i popup (come window.open(), target="_blank", o showModalDialog() ). Se questa parola chiave non viene utilizzata, il popup non si aprirà automaticamente.

  • allow-popups-to-escape-sandbox: consente al documento sandbox di aprire nuove finestre senza che tali finestre ereditino il sandboxing. Ad esempio, questo può in modo sicuro eseguire il sandbox di un annuncio senza forzare le stesse restrizioni sulla pagina a cui si collega l'annuncio.

  • allow-presentation: consente alla risorsa di avviare una sessione di presentazione .

  • allow-same-origin: se questo token non viene utilizzato, la risorsa viene trattata come se provenisse da un'origine speciale che non rispetta sempre la politica della stessa origine (potenzialmente impedendo l'accesso all'archiviazione dati/cookie e alcune API JavaScript).

  • allow-scripts: consente alla risorsa di eseguire script (ma non di creare finestre popup).

  • allow-storage-access-by-user-activation: consente alla risorsa di richiedere l'accesso alle capacità di archiviazione del genitore con l' API di accesso allo storage .

  • allow-top-navigation: consente alla risorsa di navigare nel contesto di navigazione di primo livello (quello denominato _top ).

  • allow-top-navigation-by-user-activation: consente alla risorsa di navigare nel contesto di navigazione di primo livello, ma solo se avviata da un gesto dell'utente.

Nota:

  • Quando il documento incorporato ha la stessa origine della pagina di incorporamento, è fortemente sconsigliato utilizzare entrambi allow-scripts e allow-same-origin, poiché ciò consente al documento incorporato di rimuovere l'attributo sandbox, rendendolo non più sicuro che non utilizzare affatto l'attributo sandbox.
  • Il sandboxing è inutile se l'attaccante può visualizzare il contenuto al di fuori di un iframe con sandbox, ad esempio se il visualizzatore apre il frame in una nuova scheda. Tali contenuti dovrebbero anche essere forniti da un'origine separata per limitare i potenziali danni.
  • L'attributo sandbox non è supportato in Internet Explorer 9 e versioni precedenti.

src

L'URL della pagina da incorporare. Utilizzare un valore di about:blank per incorporare una pagina vuota conforme alla policy della stessa origine. Si noti inoltre che la rimozione a livello di codice di un attributo src appertenente ad un elemento <iframe> (ad esempio tramite Element.removeAttribute()) provoca il caricamento di about:blank nel frame in Firefox (dalla versione 65), browser basati su Chromium e Safari/iOS.

srcdoc

HTML inline da incorporare, sovrascrivendo l'attributo src. Se un browser non supporta l'attributo srcdoc, tornerà all'URL nell'attributo src.

width

La larghezza del frame in pixel CSS. L'impostazione predefinita è 300.

Attributi deprecati

Questi attributi sono obsoleti e potrebbero non essere più supportati da tutti i programmi utente. Non dovresti usarli in nuovi contenuti e provare a rimuoverli dal contenuto esistente.

align

L'allineamento di questo elemento rispetto al contesto circostante.

frameborder

Il valore 1 (l'impostazione predefinita) disegna un bordo attorno a questa cornice. Il valore 0rimuove il bordo attorno a questo frame, ma dovresti invece usare la proprietà CSS borderper controllare i bordi di <iframe>.

longdesc

Un URL di una lunga descrizione del contenuto del frame. A causa del diffuso uso improprio, questo non è utile per i browser non visivi.

marginheight

La quantità di spazio in pixel tra il contenuto della cornice e i suoi bordi superiore e inferiore.

marginwidth

La quantità di spazio in pixel tra il contenuto della cornice e i suoi bordi sinistro e destro.

scrolling

Indica quando il browser deve fornire una barra di scorrimento per il frame:

  • auto: Solo quando il contenuto della cornice è più grande delle sue dimensioni.

  • yes: mostra sempre una barra di scorrimento.

  • no: non mostrare mai una barra di scorrimento.

Scripting

gli <iframe>, come gli elementi <frame>, sono inclusi nello pseudo-array window.frames.

Con l'oggetto DOM HTMLIFrameElement, gli script possono accedere all'oggetto della risorsa window con frame tramite la proprietà contentWindow. contentDocument si riferisce al document interno a <iframe>, pari a contentWindow.document.

Dall'interno di un frame, uno script può ottenere un riferimento alla sua finestra padre con window.parent.

L'accesso tramite script al contenuto di un frame è soggetto al criterio della stessa origine. Gli script non possono accedere alla maggior parte delle proprietà in altri windowoggetti se lo script è stato caricato da un'origine diversa, inclusi gli script all'interno di un frame che accedono al genitore del frame. La comunicazione tra le origini può essere ottenuta utilizzando Window.postMessage().

Posizionamento e ridimensionamento

Come elemento sostituito , la posizione, l'allineamento e il ridimensionamento del documento incorporato all'interno del riquadro dell'elemento <iframe> possono essere regolati con le proprietà object-position e object-fit.

Esempio

Questo esempio incorpora la pagina esempio.org in un iframe.

<iframe src="https://esempio.org"
        title="iframe Esempio 1" width="400" height"300">
</iframe>

Problemi di accessibilità

Le persone che navigano con tecnologie assistive come un'utilità per la lettura dello schermo possono utilizzare l'attributo title su un <iframe> per etichettarne il contenuto. Il valore del titolo dovrebbe descrivere in modo conciso il contenuto incorporato:

<iframe title="Pagina Wikipedia sull'Avocado"
        src="https://en.wikipedia.org/wiki/Avocado"></iframe>

Senza questo titolo, devono navigare nel <iframe> per determinare quale sia il suo contenuto incorporato. Questo cambio di contesto può creare confusione e richiedere molto tempo, soprattutto per le pagine con più <iframe> e/o se gli incorporamenti contengono contenuti interattivi come video o audio.