SRC и SRCDOC в IFRAME HTML5: разница и применение

Быстрый ответ

Атрибут srcdoc позволяет непосредственно встраивать HTML-содержимое в <iframe>, делая код более читаемым и интуитивным. В то же время атрибут src, использующий Data URI, требует преобразования HTML в формат URL, что может быть неудобно, особенно при работе с большими объемами данных. Использование srcdoc упрощает процесс и обеспечивает лучшую читаемость встроенного кода:

srcdoc пример использования:

<iframe srcdoc="<p>Привет, мир!</p>"></iframe>

Data URI пример использования:

<iframe src="data:text/html,<p>Привет, мир!</p>"></iframe>

Оба способа позволяют выводить текст "Привет, мир!" в <iframe>, однако srcdoc делает этот процесс более прямым и удобным для работы с HTML-контентом внутри iframe.

Навигация по безопасности

Когда дело доходит до работы с ненадежным содержимым, srcdoc можно использовать в сочетании с атрибутом sandbox для обеспечения безопасности внутреннего содержимого. Стоит отметить, что поддержка srcdoc в старых браузерах может быть ограничена. Если для <iframe> заданы одновременно и src, и srcdoc, преференция будет отдана srcdoc, исключая запросы к внешним ресурсам.

Если вы используете Internet Explorer 11, то srcdoc не будет поддерживаться. Современные браузеры хорошо работают с srcdoc, делая его более безопасным для инлайн-содержимого. Тем не менее, использование src с Data URI может привлечь внимание злоумышленников, а также существуют ограничения на длину URL.

Глубина содержимого – продвинутое управление

Бесшовная интеграция и обход междоменных ограничений

srcdoc обеспечивает более плавное и прозрачное встраивание HTML-кода, исключая сложности с кодированием и увеличивая читабельность содержимого. Это позволяет создавать полноценные HTML-структуры внутри <iframe>, контролируя междоменные ограничения, которые могут возникнуть при использовании src с Data URI:

Пример использования srcdoc для встраивания:

<iframe srcdoc="<style>h2 {color: red;}</style><h2>Стилизованный контент</h2>"></iframe>

Подробнее об этом расскажет наш спикер на видео

Работа с куками

Для iframe взаимодействие с куками может быть сложной задачей. Однако, srcdoc значительно облегчает этот процесс, предоставляя устойчивый контроль над куками. Использование src с Data URI требует учета ограничений по использованию кук в различных доменах, в то время как srcdoc является более надежным вариантом, работающим в рамках одного источника.

Особенности браузеров

Важно учесть различия в поддержке srcdoc в разных браузерах, поскольку каждый из них может внести свои коррективы в работу с этим атрибутом. Например, Chrome работает с куками по-своему, и подход srcdoc приспосабливается к этой особенности. С другой стороны, использование src может столкнуться с особыми ограничениями браузера, такими как пределы длины URL и другие "тонкости".

Не поддерживается браузером? Есть альтернативы

Если вам приходится работать со старыми браузерами, которые не поддерживают srcdoc, можно использовать методы передачи структурированных данных, такие как postMessage или серверные решения. Хотя они могут быть более сложными, они обеспечивают безопасность и возможность взаимодействия.

Визуализация

srcdoc и src с Data URI в <iframe> можно представить как два разных способа упаковки багажа:

| Метод       | Техника упаковки багажа               | Описание                                         |
| --------------- | --------------------------------- |-------------------------------------------------|
| `srcdoc`        | Прямая упаковка                  | Предметы укладываются напрямую в чемодан      |
| `src=data`      | Упакованный чемодан               | Вставка уже упакованного чемодана в другой  |

Прямая упаковка (srcdoc): объекты помещаются прямо в чемодан (iframe):

<iframe srcdoc="<p>Привет, inline!</p>"></iframe> // Мы прямо укладываем <p> в чемодан (iframe)

Упакованный чемодан (src=data): чемодан уже упакован и помещается в другой:

<iframe src="data:text/html;base64,PGgxPkhlbGxvLCBkYXRhIFVSSSE8L2gxPg=="></iframe> // Мы вкладываем упакованный объект (data URI) в большой чемодан

Подход для больших объемов данных

Для работы с большим объемом HTML-содержимого рекомендуется предпочесть использование srcdoc вместо src с Data URI, чтобы избежать перегруженности атрибута. srcdoc является более эффективным выбором, потому что он отключает необходимость кодирования и декодирования больших объемов данных.

Быстрая загрузка и пользовательский опыт

Содержимое, внедренное через srcdoc, загружается в процессе основной загрузки страницы, что может улучшить показатели скорости загрузки. Используйте srcdoc для ускорения загрузки встроенного контента и улучшения пользовательского опыта.

Обслуживание и поддержка

Отладка и поддержка становятся проще при использовании srcdoc, поскольку разработчики могут напрямую редактировать HTML непосредственно в родительском документе. Это облегчает рабочий процесс и способствует более плавному циклу разработки по сравнению с работой с заранее закодированными data URI.

Полезные материалы

1. <iframe>: Элемент встроенного кадра – HTML: язык гипертекстовой разметки | MDN — замечательный гид по атрибутам srcdoc и src.
2. HTML iframe tag — для практических примеров и реальных сценариев использования.
3. HTML Standard — детальная спецификация элемента <iframe>.
4. Search · iframe srcdoc · GitHub — примеры кода, демонстрирующие srcdoc на практике.
5. Can I use... Support tables for HTML5, CSS3, etc — проверка поддержки атрибута srcdoc элемента <iframe> в различных браузерах.
6. Play safely in sandboxed IFrames — как повысить уровень безопасности при использовании sandbox в Iframe.
7. Medium — обоснованное объяснение, как и почему использовать атрибут srcdoc.