В этой статье
Что такое предварительный просмотр HTML в реальном времени?
Предварительный просмотр HTML в реальном времени — это редактор кода в браузере, который отображает ваш HTML, CSS и JavaScript мгновенно. Пока вы печатаете, панель вывода обновляется автоматически, давая немедленную визуальную обратную связь без переключения между редактором и вкладкой браузера.
Предварительный просмотр работает внутри изолированного iframe со строгими ограничениями безопасности. Это означает, что ваш код выполняется в изолированной среде — он не может получить доступ к родительской странице, cookie или локальному хранилищу. Вы получаете безопасную площадку для экспериментов без какого-либо риска для основного приложения.
Как работает предварительный просмотр
Редактор объединяет ваш HTML, CSS и JavaScript в один документ и внедряет его в изолированный iframe. Обновления применяются с задержкой, чтобы поддерживать отзывчивость просмотра, не перегружая браузер.
- Изолированный iframe — просмотр работает только с sandbox="allow-scripts", блокируя доступ к родительской странице, cookie, формам и навигации для полной изоляции
- Отдельные вкладки кода — пишите HTML, CSS и JavaScript в отдельных панелях, каждая с соответствующим редактированием синтаксиса, автоматически объединяемых при рендеринге
- Отложенные обновления — изменения применяются после короткой паузы в наборе, сохраняя просмотр плавным и избегая постоянных перерендеров при каждом нажатии клавиши
Попробуйте бесплатно — без регистрации
Попробовать предварительный просмотр HTML →Когда использовать предварительный просмотр HTML
Предварительный просмотр идеален, когда нужна быстрая визуальная обратная связь по HTML и CSS без полной среды разработки.
- Быстрое прототипирование — тестируйте идеи компоновки, цветовые схемы и дизайн компонентов мгновенно без настройки инструментов сборки или сервера разработки
- Изучение HTML и CSS — начинающие могут видеть эффект каждого тега и свойства немедленно, что значительно ускоряет цикл обучения
- Тестирование шаблонов электронной почты — просматривайте HTML-макеты писем с встроенными стилями для проверки отображения перед отправкой, поскольку почтовые клиенты имеют ограниченную поддержку CSS
Часто задаваемые вопросы
Безопасен ли предварительный просмотр? Может ли мой код получить доступ к родительской странице?
Предварительный просмотр полностью изолирован. Iframe использует sandbox="allow-scripts" без allow-same-origin, что означает, что ваш код может выполнять JavaScript, но не может получить доступ к DOM родительской страницы, cookie, localStorage или данным сессии. Это та же модель безопасности, которую используют платформы вроде CodePen и JSFiddle.
Почему allow-same-origin не включён в sandbox?
Включение allow-same-origin вместе с allow-scripts позволило бы коду предварительного просмотра полностью выйти из изоляции — он мог бы получить доступ к cookie родительской страницы, изменять DOM или читать конфиденциальные данные. Его отсутствие гарантирует полную изоляцию. Компромисс в том, что localStorage и sessionStorage недоступны в предварительном просмотре, но это осознанный выбор безопасности.
Можно ли загружать внешние библиотеки CSS или JavaScript в предварительный просмотр?
Да. Вы можете добавлять теги link и script со ссылками на CDN URL (напр., Bootstrap, Tailwind, jQuery) в вашей панели HTML. Изолированный iframe разрешает сетевые запросы для загрузки внешних ресурсов. Просто помните, что внешние скрипты тоже работают под ограничениями изоляции — они тоже не могут получить доступ к родительской странице.