Wix home
Accedi

Editor Studio: aggiungere un elemento iFrame HTML

Tempo di lettura: 4 min.
Mostra contenuti visivi da server esterni e altre fonti in un iFrame HTML. Crea un widget meteo, un widget stock, un calendario o qualsiasi altro elemento personalizzato che desideri. Puoi incorporare uno snippet di codice o un URL esterno. 
Esempio di widget meteo su un sito Editor Studio, incorporato utilizzando l'iFrame HTML

Incorporare un codice o un sito

Aggiungi un iFrame al sito del tuo client direttamente dal pannello Aggiungi elementi. Scegli se vuoi incorporare un codice o un sito e poi incolla il codice o l'indirizzo web in modo che appaia nell'iFrame.
Importante:
Assicurati di leggere le nostre linee guida e limitazioni prima di incorporare il codice. 

Per aggiungere un iFrame HTML:

  1. Clicca su Aggiungi elementi  sul lato sinistro dell'Editor
  2. Clicca su Incorpora e social
  3. Seleziona l'elemento da aggiungere alla pagina e segui i passaggi pertinenti riportati di seguito:
Screenshot che mostra l'Editor Studio, mentre si incorpora l'indirizzo di un sito web nell'elemento iFrame

Modificare le dimensioni del contenuto mostrato

Gli elementi incorporati spesso includono larghezza e altezza predefinite in pixel, definiti dal servizio da cui sono stati acquisiti, come nel seguente esempio: 
1<iframe width="560" height="315" 
2       src="https://www.wix.com/studio/academy" 
3        frameborder="0">
4</iframe>
A causa di queste impostazioni, il contenuto potrebbe essere troncato se il contenitore iFrame (nell'area di lavoro) è più piccolo di 560 px * 315 px. Per assicurarti che il contenuto non venga troncato, sostituisci i valori in pixel con unità percentuali e impostali su 100% come mostrato di seguito: 
1<iframe width="100%" height="100%" 
2       src="https://www.wix.com/studio/academy" 
3        frameborder="0">
4</iframe>
Modifica del codice incorporato nell'Editor Studio, regolando la larghezza e l'altezza nel codice al 100%

Linee guida e limitazioni

Consulta le seguenti linee guida e limitazioni per scoprire come incorporare correttamente il codice nell'iFrame HTML, sia che si tratti dell'indirizzo di un sito o di un codice personalizzato. 

Linee guida

  • Assicurati che il tuo codice contenga HTTPS e non HTTP, altrimenti non verrà visualizzato sul tuo sito live
  • Assicurati sempre che il codice che stai incorporando sia aggiornato e compatibile con HTML5. La maggior parte dei browser non mostra correttamente le pagine e gli script se sono stati scritti utilizzando versioni HTML precedenti
  • Il codice HTML contiene gli elementi principali di una pagina, ma le impostazioni di design e altre funzionalità complesse in genere vengono memorizzate separatamente. Alcuni elementi potrebbero quindi non funzionare o avere lo stesso aspetto se gli elementi in questione non sono inclusi come riferimento all'interno del codice HTML, ad esempio file CSS e JS
  • Se non ti è chiaro come utilizzare l'attributo target, leggi qui (contenuti in inglese) o contatta il creatore del codice

Limitazioni

Il codice all'interno dell'elemento HTML viene mostrato sul sito del cliente all'interno di un iFrame in modalità sandbox. L'utilizzo di una sandbox protegge i visitatori dai potenziali effetti collaterali del codice personalizzato.
Di solito, un iFrame in modalità sandbox blocca quanto segue:
  • Contenuto che utilizza le API del browser 
  • Contenuti che utilizzano plugin (tramite <embed>, <object>, <applet> o altro) 
  • Funzioni attivate automaticamente (come la riproduzione automatica di un video o la messa a fuoco automatica di un controllo modulo)
Tuttavia, abbiamo riabilitato alcune opzioni per il tuo codice personalizzato in base alle Specifiche W3C
Sandbox
Descrizione
allow-same-origin (autorizza-stessa-origine)
Riabilita script/contenuti di terzi
allow-forms (autorizza-moduli)
Riabilita l'invio di moduli
allow-popups (autorizza-popup)
Riabilita pop-up
allow-scripts (autorizza-script) 
Riabilita codice JavaScript personalizzato
allow-pointer-lock (autorizza-blocco-puntatore)
Riabilita l'acquisizione del puntatore
Esempio di widget meteo su un sito Editor Studio, incorporato utilizzando l'iFrame HTML
Screenshot che mostra l'Editor Studio, mentre si incorpora l'indirizzo di un sito web nell'elemento iFrame
Modifica del codice incorporato nell'Editor Studio, regolando la larghezza e l'altezza nel codice al 100%