Ricerca…
Parametri
| Attributo | Dettagli |
|---|---|
name | Consente di impostare il nome dell'elemento, per essere utilizzato con un a tag per cambiare del iframe src . |
width | Imposta la larghezza dell'elemento in pixel. |
height | Imposta l'altezza dell'elemento in pixel. |
src | Specifica la pagina che verrà visualizzata nel frame. |
srcdoc | Specifica il contenuto che verrà visualizzato nel frame, supponendo che il browser lo supporti. Il contenuto deve essere HTML valido. |
sandbox | Quando impostato, il contenuto dell'iframe viene considerato di origine univoca e le funzionalità che includono script, plug-in, moduli e popup saranno disabilitate. Le restrizioni possono essere ridotte in modo selettivo aggiungendo un elenco di valori separati da spazi. Vedere la tabella in Osservazioni per i possibili valori. |
allowfullscreen | Se consentire ai contenuti dell'iframe di utilizzare requestFullscreen() |
Osservazioni
Un iframe viene utilizzato per incorporare un altro documento nel documento HTML corrente.
È possibile utilizzare gli iframe per la visualizzazione:
- altre pagine HTML sullo stesso dominio;
- altre pagine HTML su un altro dominio (vedi sotto - Politica della stessa origine);
- Documenti PDF (anche se IE potrebbe avere qualche problema, questa domanda SO potrebbe aiutare);
È necessario utilizzare un iframe come ultima risorsa, in quanto ha problemi con il segnalibro e la navigazione, e ci sono sempre opzioni migliori oltre a un iframe. Questa domanda SO dovrebbe aiutarti a capire di più sugli alti e bassi degli iframe.
Politica della stessa origine
Alcuni siti non possono essere visualizzati utilizzando un iframe, perché applicano una politica chiamata Stessa politica dell'origine . Ciò significa che il sito su cui si trova l'iframe deve trovarsi nello stesso dominio di quello da visualizzare.
Questa politica si applica anche alla manipolazione di contenuti che vivono all'interno di un iFrame. Se iFrame accede a contenuti da un dominio diverso, non sarai in grado di accedere o manipolare il contenuto all'interno di un iFrame.
L'elemento iframe su W3C
attributo sandbox
L'attributo sandbox , se impostato, aggiunge ulteriori restrizioni all'iframe. Un elenco separato di token può essere usato per attenuare queste restrizioni.
| Valore | Dettagli |
|---|---|
allow-forms | Consente di inviare moduli. |
allow-pointer-lock | Abilita l'API del puntatore JavaScript. |
allow-popups | I popup possono essere creati usando window.open o <a target="_blank" |
allow-same-origin | Il documento iframe usa la sua vera origine invece di essere dato a uno unico. Se usato con allow-scripts il documento iframe può rimuovere tutto il sandboxing se è della stessa origine del documento genitore. |
allow-scripts | Abilita gli script. Il documento iframe e il documento principale possono essere in grado di comunicare tra loro utilizzando l'API postMessage() . Se usato con allow-same-origin il documento iframe può rimuovere tutto il sandboxing se è della stessa origine del documento genitore. |
allow-top-navigation | Consente al contenuto dell'iframe di cambiare la posizione del documento di livello superiore. |
Nozioni di base su una cornice in linea
Il termine "IFrame" significa Inline Frame. Può essere usato per includere un'altra pagina nella tua pagina. Questo produrrà una piccola cornice che mostra il contenuto esatto di base.html .
<iframe src="base.html"></iframe>
Impostazione della dimensione del fotogramma
L'IFrame può essere ridimensionato usando gli attributi width e height , dove i valori sono rappresentati in pixel (valori di percentuale consentiti HTML 4.01, ma HTML 5 consente solo valori in pixel CSS).
<iframe src="base.html" width="800" height="600"></iframe>
Usando Ancore con IFrames
Di norma, viene avviata una modifica della pagina Web all'interno di un Iframe con l'Iframe, ad esempio facendo clic su un collegamento all'interno dell'Ifame. Tuttavia, è possibile modificare il contenuto di un IFrame dall'esterno dell'IFrame. È possibile utilizzare un tag di ancoraggio il cui attributo href è impostato sull'URL desiderato e il cui attributo target è impostato sull'attributo del name dell'iframe.
<iframe src="webpage.html" name="myIframe"></iframe>
<a href="different_webpage.html" target="myIframe">Change the Iframe content to different_webpage.html</a>
Utilizzando l'attributo "srcdoc"
È possibile utilizzare l'attributo srcdoc (anziché l'attributo src ) per specificare il contenuto esatto dell'iframe come un intero documento HTML. Questo produrrà un IFrame con il testo "Gli IFrame sono fantastici!"
<iframe srcdoc="<p>IFrames are cool!</p>"></iframe>
Se l'attributo srcdoc non è supportato dal browser, l'IFrame ricadrà invece sull'uso dell'attributo src , ma se entrambi gli attributi src e srcdoc sono presenti e supportati dal browser, srcdoc ha la precedenza.
<iframe srcdoc="<p>Iframes are cool!</p>" src="base.html"></iframe>
Nell'esempio precedente, se il browser non supporta l'attributo srcdoc , visualizzerà invece il contenuto della pagina base.html .
sandboxing
Quanto segue incorpora una pagina Web non affidabile con tutte le restrizioni abilitate
<iframe sandbox src="http://example.com/"></iframe>
Per consentire alla pagina di eseguire script e inviare moduli, aggiungere allow-scripts e allow-forms sandbox attribute .
<iframe sandbox="allow-scripts allow-forms" src="http://example.com/"></iframe>
Se c'è un contenuto non attendibile (come i commenti degli utenti) sullo stesso dominio della pagina web padre, un iframe può essere utilizzato per disabilitare gli script pur consentendo al documento principale di interagire con il suo contenuto utilizzando JavaScript.
<iframe sandbox="allow-same-origin allow-top-navigation" src="http://example.com/untrusted/comments/page2">
Il documento principale può aggiungere listener di eventi e ridimensionare l'IFrame per adattarlo ai suoi contenuti. Questo, insieme a allow-top-navigation , può far sembrare che l'iframe sandbox sia parte del documento genitore.
Questa sandbox non sostituisce l'input di sanificazione ma può essere utilizzata come parte di una strategia di difesa in profondità .
Sappi anche che questa sandbox può essere sovvertita da un utente malintenzionato che convince un utente a visitare direttamente la sorgente dell'iframe. L'intestazione HTTP della politica di sicurezza del contenuto può essere utilizzata per mitigare questo attacco.