iFrame

Iframe (inline frame) — это HTML-элемент, который встраивает одну веб-страницу внутри другой. Определяемый тегом `<iframe>`, он создаёт независимое прямоугольное окно на вашей странице, загружающее и отображающее контент с отдельного URL. Встроенный контент сохраняет собственный контекст документа — с отдельными DOM, стилями и скриптами — изолированно от основной страницы. Iframe широко используется для встраивания видео, карт, форм, платёжных шлюзов и интерактивных виджетов без необходимости основной странице обрабатывать код или стили этого контента напрямую.

Для цифровых издателей iframe предоставляет самый простой и универсальный способ разместить интерактивный [флипбук](/glossary/flipbook) или просмотрщик документов прямо на существующем сайте. Посетители могут просматривать публикацию, не покидая страницу, что удерживает их на вашем сайте вместо перенаправления на стороннюю ссылку. Это улучшает время на странице, снижает [показатель отказов](/glossary/bounce-rate) и органично интегрирует читательский опыт в ваш дизайн. Поскольку iframe — нативная HTML-функция, поддерживаемая всеми современными браузерами, он работает на WordPress, Shopify, Squarespace, кастомных сайтах и практически любой CMS.

FlipLink генерирует готовый iframe-[код встраивания](/glossary/embed-code) для каждого опубликованного флипбука и документа. Вы копируете фрагмент кода из панели управления FlipLink и вставляете его в HTML вашего сайта, редактор CMS или конструктор лендингов. Iframe загружает полный просмотрщик FlipLink — включая [анимации перелистывания](/glossary/page-flip-animation), [CTA-кнопки](/glossary/call-to-action-cta), [формы захвата лидов](/glossary/lead-capture) и [отслеживание аналитики](/glossary/analytics-dashboard) — в указанных вами размерах. [Адаптивное встраивание](/features/sharing-and-distribution) FlipLink обеспечивает автоматическую подстройку iframe под любой размер экрана. FlipLink также предлагает опцию [кликабельного изображения](/features/clickable-image-embed) как лёгкую альтернативу со ссылкой на полный просмотрщик.

Встраивание iframe использует следующую базовую HTML-структуру: ```html <iframe src="https://go.fliplink.me/your-flipbook" width="100%" height="600" frameborder="0" allowfullscreen> </iframe> ``` Ключевые атрибуты, влияющие на поведение: - **`src`** — URL встраиваемого контента. FlipLink предоставляет этот URL для каждой публикации. - **`width` / `height`** — Управляет видимой областью. Адаптивный код FlipLink использует процентные значения ширины для гибких макетов. - **`sandbox`** — Ограничивает возможности встроенного контента (например, блокирует формы, скрипты или всплывающие окна). Код FlipLink настроен для разрешения взаимодействий, необходимых для полной функциональности. - **`loading="lazy"`** — Откладывает загрузку iframe до тех пор, пока пользователь не прокрутит страницу к нему, улучшая начальную скорость загрузки. - **`allow`** — Указывает разрешения функций, таких как полноэкранный режим, который FlipLink использует для погружающего чтения.

Iframe вводит границу доверия между основной страницей и встроенным контентом. Понимание модели безопасности помогает безопасно встраивать контент: - **Политика одного источника** — Браузеры запрещают основной странице доступ к DOM iframe с другого источника и наоборот. Ваш сайт не может читать или изменять внутренние компоненты просмотрщика FlipLink, а встроенный просмотрщик не может получить доступ к cookie или данным вашего сайта. - **[Белый список доменов](/glossary/domain-whitelisting)** — FlipLink позволяет ограничить, какие домены могут встраивать ваши публикации, предотвращая отображение вашего контента неавторизованными сайтами в их iframe. - **Content Security Policy (CSP)** — Если ваш сайт использует строгие CSP-заголовки, может потребоваться добавить домен FlipLink в директиву `frame-src` для разрешения загрузки iframe. - **Защита от кликджекинга** — FlipLink устанавливает соответствующие заголовки `X-Frame-Options` и CSP для контроля мест встраивания просмотрщика, разрешая при этом ваши авторизованные домены.

**«Iframe вредит SEO.»** Поисковые системы могут переходить по ссылкам внутри iframe и индексировать встроенный контент отдельно, но этот контент не влияет на SEO-рейтинг основной страницы. Для флипбуков это не проблема — SEO-ценность содержится в контенте, заголовках и метаданных вашей страницы, а флипбук служит инструментом вовлечения. **«Iframe всегда замедляет страницу.»** Сам по себе iframe создаёт минимальную нагрузку. Проблемы с производительностью возникают из-за того, что загружает iframe. Использование `loading="lazy"` обеспечивает загрузку флипбука только при прокрутке пользователем до него, сохраняя быструю начальную загрузку страницы. **«Iframe — устаревшая технология.»** Хотя некоторые устаревшие способы использования iframe (например, построение макетов страниц) действительно устарели, встраивание на основе iframe остаётся стандартом для сторонних виджетов, платёжных форм и интерактивного контента. Все крупные платформы — YouTube, Google Maps, Stripe и FlipLink — используют iframe для встраивания.

Iframe — стандартный и безопасный метод встраивания интерактивного контента, такого как флипбуки, на любой веб-сайт. Он обеспечивает полную функциональность, сохраняя встроенный контент изолированным от кода и стилей основной страницы.