I frame incorporati, comunemente definiti semplicemente "iframe", sono l'unico tipo di frame consentito in HTML5. Questi fotogrammi sono essenzialmente una sezione della pagina che "ritaglia". Nello spazio che hai tagliato fuori dalla pagina, puoi quindi inserire una pagina web esterna. In sostanza, un iframe è un'altra finestra del browser direttamente nella tua pagina web. Si identificano gli iframe comunemente utilizzati sui siti Web che devono includere contenuti esterni come una mappa di Google o un video da YouTube. Entrambi i siti Web famosi utilizzano iframe nel codice di incorporamento.
Come usare l'elemento IFRAME
L'elemento utilizza gli elementi globali HTML5 e molti altri elementi. Quattro sono anche attributi in HTML 4.01:
- -L'URL per la fonte del frame
- -L'altezza della finestra
- -La larghezza della finestra
- -Il nome della finestra
E tre sono nuovi in HTML5:
srcdoc-Il codice HTML per l'origine del frame. Questo attributo ha la precedenza su qualsiasi URL nelsrcattributosandbox-Un elenco di funzionalità che dovrebbero essere consentite o non consentite nella finestra cornicesenza soluzione di continuità-Segna l'agente utente che l'iframe deve essere reso come se fosse parte invisibile del documento genitore
Per creare un iframe semplice, puoi impostare l'URL di origine e la larghezza e l'altezza:
Nota che puoi scegliere di non usare i valori dei pixel per le impostazioni del tuo iframe, ma puoi invece decidere di usare una percentuale. Se stai costruendo un sito web reattivo il cui dimensionamento dovrebbe cambiare con schermi di dimensioni diverse, queste percentuali saranno importanti.
Esistono anche alcuni attributi validi in HTML 4.01 ma obsoleti in HTML5. Poiché la maggior parte dei siti Web oggi utilizza HTML5 +, questi attributi sono quelli che non si desidera utilizzare (ma che è possibile vedere in alcuni documenti legacy).
- -Invece, usa un
UNelemento da collegare a una descrizione - -Invece, usa il CSS
galleggianteproprietà allowTransparency-Invece, usa il CSSsfondoproprietà per rendere l'ifram trasparente- -Instead usa il
confineProprietà CSS marginheight-Invece, usa il CSSmargineproprietàmarginwidth-Invece, usa il CSSmargineproprietà- -Invece, usa il CSS
straripamentoproprietà
Supporto browser IFRAME
Il IFRAME elemento è supportato da tutti i browser moderni:
- androide
- Cromo
- Firefox
- Internet Explorer 2+
- iOS / Safari Mobile
- Netscape 7+
- Opera 3+
- Safari
Se nessun numero di versione è mostrato nell'elenco precedente, è perché tutte le versioni di quel browser lo supportano.
Una cosa da tenere presente è che mentre tutti i browser supportano il IFRAME elemento, c'è ancora un supporto limitato per alcune delle funzionalità HTML5.
- utilizzando
straripamentodisattivare lo scorrimento non è affidabile. Se non vuoi barre di scorrimento sui tuoi iframe, dovresti continuare a usare ilscrollingattributo. - Il
srcdoc,sandbox, esenza soluzione di continuitàgli attributi non sono supportati da nessun browser in questo momento.
Collegamento con iframe
Quando dai i tuoi iframe a nome o id puoi quindi puntare i tuoi collegamenti su quel fotogramma con l'attributo sul UN elemento. Quindi, quando un utente fa clic sul link, si aprirà all'interno dell'iframe referenziato anziché della finestra corrente.
Prova tu stesso. Digitare quanto segue in una pagina Web:
Questo è il mio iframe
Quando fai clic su questo link si aprirà un nuovo documento all'interno della finestra sopra.
id = "myIframe" src = "http://webdesign.about.com/#lp-main" height = "200px" width = "500px">
Se il documento è stato aperto nel IFRAME non ha alcun obiettivo impostato, quindi tutti quei link si apriranno nello stesso iframe del documento genitore.
È possibile utilizzare questa funzione per creare collegamenti in uno IFRAME cambia il contenuto di un altro IFRAME nella stessa pagina.
IFrames e sicurezza
Il IFRAME elemento, di per sé, non è un rischio per la sicurezza per voi o per i vostri lettori. Sfortunatamente gli iframe hanno una cattiva reputazione perché possono essere utilizzati da siti Web dannosi per includere contenuti che possono infettare il computer di un visitatore senza che vengano visualizzati nella pagina. Ciò avviene facendo in modo che i collegamenti puntino verso l'invisibile IFRAME e quegli script attivano il codice dannoso. L'utente fa clic sul collegamento e pensa che il collegamento sia interrotto perché non è successo nulla, ma è stato impostato uno script in cui non è stato possibile visualizzarlo.
Ci sono anche virus informatici che iniettano un'invisibile IFRAME nelle tue pagine web, trasformando efficacemente il tuo sito Web in una botnet. Possono farlo tramite SQL injection e altri attacchi.
La cosa da ricordare quando si include un IFRAME sulla tua pagina web è che i tuoi utenti sono sicuri solo quanto il contenuto di tutti i siti a cui ti colleghi. Se hai motivo di ritenere che un sito sia inaffidabile, non collegarlo in alcun modo e sicuramente non includere il suo contenuto in un IFRAME. Il collegamento alle proprie pagine all'interno di iframe, tuttavia, non rappresenta un rischio per la sicurezza dell'utente o degli utenti.
Articolo originale di Jennifer Krynin. Modificato l'11/7/16 da Jeremy Girard
