HTML, CSS und JavaScript im Browser ausführen

Fügen Sie HTML mit CSS und JavaScript in den Editor ein und klicken Sie auf Vorschau öffnen: Der Code öffnet sich in einem neuen Browserfenster, in dem das Markup gerendert und die Skripte ausgeführt werden. So sehen Sie schnell, wie sich ein Snippet, eine Layoutänderung oder ein kleines DOM-Skript in einem echten Browser verhält — ohne Datei und ohne lokalen Server.

Die eingefügte Seite läuft in einem Sandbox-Frame, getrennt von dieser Website. Skripte und Dialoge funktionieren, doch der Code kann weder den Speicher noch das DOM dieser Seite lesen, und nichts von dem, was Sie eingeben, wird hochgeladen: Die Vorschau findet vollständig in Ihrem Browser statt.

  1. Fügen Sie Ihren Code in den Editor ein: ein vollständiges HTML-Dokument oder ein Fragment, etwa ein div mit einem Style- und einem Script-Block.
  2. Klicken Sie auf Vorschau öffnen. Ein neues Fenster mit der gerenderten Seite erscheint; blockiert der Browser Pop-ups, sagt die Seite das — erlauben Sie Pop-ups für voritools.com und klicken Sie erneut.
  3. Nutzen Sie Alle auswählen, Kopieren und Leeren beim Arbeiten: Alle auswählen markiert den ganzen Editor, Kopieren legt den Inhalt in die Zwischenablage, Leeren macht die Box für einen Neustart frei.
  4. Schließen Sie das Vorschaufenster am Ende; Code und Vorschau werden nirgends gespeichert, also behalten Sie eine eigene Kopie von allem, was Sie weiterverwenden wollen.

Was beim Klick auf Vorschau öffnen passiert

Wie die Vorschau isoliert wird

Das Vorschaufenster lädt Ihren Code in ein iframe, dessen sandbox-Attribut auf allow-scripts, allow-modals, allow-forms und allow-popups gesetzt ist. Skripte laufen also, Dialoge (alert, confirm, prompt) und Formularelemente funktionieren, Links können weitere Fenster öffnen — und der Frame gilt dabei als undurchsichtige Herkunft (opaque origin).

Diese opaque origin ist der entscheidende Punkt: Eine Seite in der Sandbox erreicht weder das übergeordnete Dokument noch den localStorage dieser Website, eingefügter fremder Code kann also nicht auf Ihren VoriTools-Tab zugreifen. Sie kann diese Seite auch nicht wegnavigieren; alles, was sie tut, bleibt im eigenen Frame.

Was Sie damit prüfen können

Für den von Ihnen gelieferten Code verhält sich die Vorschau wie ein Browser-Tab: Das HTML wird geparst, das CSS angewendet, interne und externe Skripte laufen, DOM-Änderungen sind sofort sichtbar. Das Vorschaufenster zu verkleinern oder zu vergrößern ist ein praktischer Weg, um Media Queries und flexible Layouts zu beobachten.

Die Seite bringt keine eigene Fehlerkonsole mit: Schlägt ein Skript fehl, sehen Sie das, was eine normale Seite zeigen würde — oft einen leeren oder halb gerenderten Frame. Für eine schnelle Kontrolle reicht das; wenn etwas klemmt, sind die Entwicklerwerkzeuge des Browsers die richtige Adresse.

Grenzen, Datenschutz und Praxis

Nichts wird an VoriTools gesendet: Ihren Code parst und führt der Browser aus, keine Anfrage trägt ihn mit. Auch serverseitig wird nichts ausgeführt, PHP-, Python- oder Datenbankcode läuft hier also nicht.

Der Editor ist bewusst schlicht — keine Syntaxhervorhebung, kein Dateiladen, kein Verlauf — und ein Neuladen der Seite leert ihn. Code, der auf Cookies oder localStorage baut, findet in der Sandbox keine gespeicherte Sitzung; und wenn der Pop-up-Blocker das Fenster verhindert, zeigt die Seite statt der Vorschau eine Meldung.

Zuletzt verwendet: