У цій статті
Що таке попередній перегляд HTML у реальному часі?
Попередній перегляд HTML у реальному часі — це редактор коду в браузері, який рендерить ваш HTML, CSS та JavaScript миттєво. Поки ви друкуєте, панель виводу оновлюється автоматично, надаючи вам негайний візуальний зворотний зв'язок без перемикання між редактором і вкладкою браузера.
Попередній перегляд працює всередині ізольованого iframe з суворими обмеженнями безпеки. Це означає, що ваш код виконується в ізольованому середовищі — він не може отримати доступ до батьківської сторінки, cookies або локального сховища. Ви отримуєте безпечний майданчик для експериментів без жодного ризику для основного додатку.
Як працює попередній перегляд
Редактор об'єднує ваш HTML, CSS та JavaScript в один документ і вставляє його в ізольований iframe. Оновлення застосовуються з затримкою, щоб тримати перегляд чуйним, не перевантажуючи браузер.
- Ізольований iframe — перегляд працює лише з sandbox="allow-scripts", блокуючи доступ до батьківської сторінки, cookies, форм і навігації для повної ізоляції
- Окремі вкладки коду — пишіть HTML, CSS та JavaScript у спеціальних панелях, кожна з відповідним редагуванням синтаксису, автоматично об'єднаних при рендерингу
- Відкладені оновлення — зміни застосовуються після короткої паузи в наборі, зберігаючи перегляд плавним і уникаючи постійних перерендерів при кожному натисканні клавіші
Спробуйте безкоштовно — реєстрація не потрібна
Спробувати попередній перегляд HTML →Коли використовувати попередній перегляд HTML
Попередній перегляд ідеальний, коли потрібен швидкий візуальний зворотний зв'язок щодо HTML та CSS без повного середовища розробки.
- Швидке прототипування — тестуйте ідеї компонування, кольорові схеми та дизайн компонентів миттєво без налаштування інструментів збірки чи сервера розробки
- Вивчення HTML та CSS — початківці можуть бачити ефект кожного тега та властивості негайно, що значно прискорює процес навчання
- Тестування шаблонів електронної пошти — переглядайте HTML-макети листів з вбудованими стилями для перевірки відображення перед відправкою, оскільки поштові клієнти мають обмежену підтримку CSS
Часті запитання
Чи безпечний попередній перегляд? Чи може мій код отримати доступ до батьківської сторінки?
Попередній перегляд повністю ізольований. Iframe використовує sandbox="allow-scripts" без allow-same-origin, що означає, що ваш код може виконувати JavaScript, але не може отримати доступ до DOM батьківської сторінки, cookies, localStorage або даних сесії. Це та сама модель безпеки, яку використовують платформи на кшталт CodePen та JSFiddle.
Чому allow-same-origin не включено в sandbox?
Включення allow-same-origin разом з allow-scripts дозволило б коду попереднього перегляду повністю вийти за межі ізоляції — він міг би отримати доступ до cookies батьківської сторінки, змінювати DOM або читати конфіденційні дані. Його відсутність гарантує повну ізоляцію. Компроміс полягає в тому, що localStorage та sessionStorage недоступні в попередньому перегляді, але це свідомий вибір безпеки.
Чи можу я завантажувати зовнішні бібліотеки CSS або JavaScript у перегляді?
Так. Ви можете додавати теги link та script з посиланнями на CDN URL (напр., Bootstrap, Tailwind, jQuery) у вашій панелі HTML. Ізольований iframe дозволяє мережеві запити для завантаження зовнішніх ресурсів. Просто пам'ятайте, що зовнішні скрипти також працюють під обмеженнями ізоляції — вони теж не можуть отримати доступ до батьківської сторінки.