Visualizzatore di HTML Renderizzato

Perché il frame è isolato

L’HTML incollato può contenere di tutto: tag <script>, un trucco <img onerror="...">, un modulo che invia dati da qualche parte o un <iframe> che carica un altro sito. Per impedire che tutto ciò tocchi la pagina, l’anteprima viene scritta in un <iframe sandbox> con l’attributo sandbox vuoto, l’impostazione più restrittiva che esista. In questa modalità il browser blocca contemporaneamente l’esecuzione degli script, l’invio dei moduli, i pop-up, la navigazione di primo livello e l’accesso alla stessa origine. Vedi il risultato visivo senza dare alcun potere al markup.

Poiché gli script non vengono mai eseguiti, tutto ciò che dipende da JavaScript (un web component che si idrata al caricamento, un grafico che si disegna da solo, un framework che si monta in un <div> vuoto) mostra solo il suo markup statico, non il suo risultato con gli script. È un compromesso voluto: un’anteprima sicura e prevedibile invece di una interattiva.

Cosa il visualizzatore renderizza bene

Buoni usi per questo strumento

• QA dei modelli di email. Incolla l’export dal tuo editor di email e osserva il layout senza inviarti un messaggio di prova.
• Controlli rapidi sui dati estratti. Hai catturato un po’ di innerHTML da una pagina: si renderizza di nuovo in qualcosa di sensato? In caso contrario, il frammento è probabilmente incompleto.
• Revisione da Markdown a HTML. Passa un testo attraverso un convertitore (lo strumento da HTML a Markdown fa l’andata e ritorno) e vedi qui in anteprima l’HTML risultante.
• Imparare e insegnare. Incolla un esempio dalla documentazione e osserva esattamente come un browser lo dispone.

Cose da tenere a mente

• URL relativi. Le immagini e i fogli di stile referenziati con un percorso relativo come /assets/logo.png non hanno alcun server contro cui risolversi, quindi non si caricheranno. Usa un URL assoluto https:// o un URI data: se hai bisogno che compaia un’immagine.
• Risorse esterne. I font, i fogli di stile e le immagini caricati da altri siti dipendono dal fatto che quei siti lo permettano; alcuni inviano header che bloccano il caricamento all’interno di un frame.
• Nessuno scripting. Se il tuo markup prende vita solo con JavaScript, l’anteprima mostra il suo stato prima degli script. È previsto, non è un difetto.