Softonic

Visare för renderad HTML

Steg 1 / 2
Nästa

Klistra in valfri HTML (en e-postmall, ett skrapat sidfragment, ett exempel ur dokumentationen) och klicka på Rendera för att se den uppritad i en isolerad iframe. Ramen körs med webbläsarens strängaste sandlåda: skript körs inte, formulär kan inte skicka något och markeringen kan varken navigera bort eller röra sidan runt omkring. Det är det snabbaste sättet att svara på frågan “hur ser den här markeringen faktiskt ut” utan att sätta upp en testserver.

Så förhandsgranskar du HTML

  1. 1

    Klistra in din HTML

    Lägg ett fullständigt dokument eller ett löst fragment i källfältet. Det du klistrar in är exakt det som renderas, precis som det är skrivet.

  2. 2

    Klicka på Rendera

    Visaren skriver din HTML i en isolerad iframe och visar resultatet direkt på sidan.

  3. 3

    Läs förhandsgranskningen

    Ramen ritar din markering som en webbläsare skulle göra: rubriker, tabeller, listor, inline-stilar och SVG dyker alla upp.

  4. 4

    Justera och rendera igen

    Putsa källan och rendera hur många gånger du vill för att jämföra hur varje version ser ut.

Varför ramen är isolerad

Inklistrad HTML kan innehålla vad som helst: <script>-taggar, ett <img onerror="...">-trick, ett formulär som skickar data någonstans eller en <iframe> som laddar en annan webbplats. För att inget av det ska röra sidan skrivs förhandsgranskningen i en <iframe sandbox> med ett tomt sandbox-attribut, den strängaste inställning som finns. I det läget blockerar webbläsaren samtidigt skriptkörning, formulärinlämning, popup-fönster, navigering på toppnivå och åtkomst till samma ursprung. Du ser det visuella resultatet utan att ge markeringen någon makt.

Eftersom skript aldrig körs visar allt som beror på JavaScript (en webbkomponent som hydreras vid laddning, ett diagram som ritar sig självt, ett ramverk som monteras i en tom <div>) enbart sin statiska markering, inte sitt skriptade resultat. Det är en medveten avvägning: en trygg och förutsägbar förhandsgranskning framför en interaktiv.

Vad visaren renderar bra

Innehållstyp Anmärkningar
E-post-HTML Tabellbaserade layouter och inline-stilar visas som de flesta klienter ritar dem
Brödtext i blogginlägg Rubriker, listor, citat och bilder visas helt utan skript
Skrapat fragment Visar om markeringen du fångade är fullständig nog att stå på egen hand
Inline-SVG Ritas i valfri storlek, praktiskt för att kolla en ikon
Statisk komponentmarkering Markeringen renderas; beteendet i JavaScript gör det inte

Bra användningar för det här verktyget

  • QA av e-postmallar. Klistra in exporten från din e-postredigerare och se layouten utan att skicka ett testmeddelande till dig själv.
  • Snabbkoll av skrapad data. Du fångade lite innerHTML från en sida: renderas den tillbaka till något vettigt? Om inte är fragmentet troligen ofullständigt.
  • Granskning av Markdown till HTML. Kör text genom en konverterare (verktyget HTML till Markdown gör resan fram och tillbaka) och förhandsgranska den resulterande HTML:en här.
  • Lära och lära ut. Klistra in ett exempel ur dokumentationen och se exakt hur en webbläsare placerar ut det.

Att tänka på

  • Relativa URL:er. Bilder och stilmallar som refereras via en relativ sökväg som /assets/logo.png har ingen server att lösas mot och laddas därför inte. Använd en absolut https://-URL eller en data:-URI om du behöver att en bild dyker upp.
  • Externa resurser. Typsnitt, stilmallar och bilder som laddas från andra webbplatser beror på att de webbplatserna tillåter det; vissa skickar rubriker som blockerar laddning inuti en ram.
  • Inga skript. Om din markering bara får liv med JavaScript visar förhandsgranskningen dess tillstånd före skripten. Det är väntat, inte ett fel.

Vanliga frågor

Ja. Förhandsgranskningen körs i en helt isolerad iframe utan några tillstånd, så skript kan inte köras och markeringen kan inte nå sidan runt omkring. Även skadlig HTML kan bara rita sig själv inuti ramen.

Nej. Sandlådan blockerar skriptkörning helt, så <script>-taggar och inline-händelsehanterare ignoreras. Du ser den statiska markeringen, och det är just det som gör förhandsgranskningen trygg.

En relativ sökväg har inget att lösas mot, och vissa värdar skickar rubriker som hindrar deras bilder från att laddas inuti en ram. Använd en absolut https://-URL eller bädda in bilden som en data:-URI.

Ja. Klistra in hela dokumentet (doctype, <head>, <body> och allt) så renderas det som det är skrivet. Ett löst fragment fungerar också; webbläsaren fyller i resten.

Det här verktyget renderar HTML som du klistrar in som text; det hämtar aldrig en URL. Du styr exakt vad som renderas, vilket är praktiskt för e-postmallar, skrapade fragment och snabb felsökning.

Relaterade verktyg

ASCII-tabellreferens

Full ASCII-tabell från 0 till 127 med decimal-, hex-, oktal- och binärvärden samt notation för numeriska HTML-referenser, inklusive NUL, LF och DEL.

HTML-teckenreferens

En sökbar lista över HTML-entiteter med deras namngivna och numeriska koder samt kopiering med ett klick för specialtecken och symboler.

Referens för kortkommandon

Sök dokumenterade standardkommandon för VS Code, Chrome och Bash med GNU Readline i macOS, Windows och Linux.

E-postvalidator

Validera en e-postadress: RFC 5322-syntaxkontroll, live-slagning av MX-poster samt detaljer om lokal del, domän och längd. Ingen e-post skickas.

EditorConfig-generator

Bygg en .editorconfig utifrån dina regler för indrag, radslut och teckenuppsättning, och lägg till en korrekt sektion för varje språk i repot: Python, Go, YAML, Makefile med flera.

Generator för platshållarbilder

Skapa en bild på 1–4000 px med egna färger och text, ladda ned PNG eller kopiera webbadress och HTML.

Verktyget finns på andra språk