W tym artykule
Czym jest podgląd HTML na żywo?
Podgląd HTML na żywo to edytor kodu w przeglądarce, który renderuje HTML, CSS i JavaScript w czasie rzeczywistym. Podczas pisania panel wyjściowy aktualizuje się natychmiast, dając natychmiastową wizualną informację zwrotną bez przełączania się między edytorem a kartą przeglądarki.
Podgląd działa wewnątrz sandboxowanego iframe z surowymi ograniczeniami bezpieczeństwa. Oznacza to, że kod wykonuje się w izolowanym środowisku — nie może uzyskać dostępu do strony nadrzędnej, ciasteczek ani lokalnego magazynu. Masz bezpieczne środowisko do eksperymentowania bez żadnego ryzyka dla aplikacji hosta.
Jak działa podgląd na żywo
Edytor łączy HTML, CSS i JavaScript w jeden dokument i wstrzykuje go do sandboxowanego iframe. Aktualizacje są opóźniane, aby utrzymać podgląd responsywny bez przeciążania przeglądarki.
- Sandboxowany iframe — podgląd działa tylko z sandbox="allow-scripts", blokując dostęp do strony nadrzędnej, ciasteczek, formularzy i nawigacji dla pełnej izolacji
- Oddzielne karty kodu — pisz HTML, CSS i JavaScript w dedykowanych panelach, każdy z odpowiednim edytowaniem składni, automatycznie łączonych przy renderowaniu
- Opóźnione aktualizacje — zmiany są stosowane po krótkiej przerwie w pisaniu, utrzymując podgląd płynny i unikając ciągłych re-renderów przy każdym naciśnięciu klawisza
Wypróbuj za darmo — bez rejestracji
Wypróbuj podgląd HTML na żywo →Kiedy używać podglądu HTML na żywo
Podgląd na żywo jest idealny, gdy potrzebujesz szybkiej wizualnej informacji zwrotnej o HTML i CSS bez pełnego środowiska programistycznego.
- Szybkie prototypowanie — testuj pomysły na układ, schematy kolorów i projekty komponentów natychmiast bez konfigurowania narzędzi do budowania
- Nauka HTML i CSS — początkujący mogą zobaczyć efekt każdego tagu i właściwości natychmiast, co znacznie przyspiesza pętlę uczenia się
- Testowanie szablonów emaili — podglądaj układy emaili HTML ze stylami inline, aby sprawdzić renderowanie przed wysłaniem, ponieważ klienty poczty mają ograniczone wsparcie CSS
Często zadawane pytania
Czy podgląd jest bezpieczny? Czy mój kod może uzyskać dostęp do strony nadrzędnej?
Podgląd jest w pełni sandboxowany. Iframe używa sandbox="allow-scripts" bez allow-same-origin, co oznacza, że kod może uruchamiać JavaScript, ale nie może uzyskać dostępu do DOM strony nadrzędnej, ciasteczek, localStorage ani danych sesji. Jest to ten sam model bezpieczeństwa stosowany przez platformy takie jak CodePen i JSFiddle.
Dlaczego allow-same-origin nie jest włączone w sandboxie?
Włączenie allow-same-origin razem z allow-scripts pozwoliłoby kodowi podglądu całkowicie uciec z sandboxa — mógłby uzyskać dostęp do ciasteczek strony nadrzędnej, modyfikować DOM lub odczytywać wrażliwe dane. Pominięcie go gwarantuje pełną izolację. Kompromisem jest to, że localStorage i sessionStorage nie są dostępne w podglądzie, ale jest to świadomy wybór bezpieczeństwa.
Czy mogę załadować zewnętrzne biblioteki CSS lub JavaScript w podglądzie?
Tak. Możesz dodać tagi link i script odwołujące się do adresów CDN (np. Bootstrap, Tailwind, jQuery) w panelu HTML. Sandboxowany iframe pozwala na żądania sieciowe do ładowania zasobów zewnętrznych. Pamiętaj tylko, że zewnętrzne skrypty również działają pod ograniczeniami sandboxa — one też nie mogą uzyskać dostępu do strony nadrzędnej.