Встраивание страниц: iframe

Тег <iframe> (inline frame — встроенная рамка) показывает внутри вашей страницы другую страницу — со своим адресом, стилями и скриптами. Так на сайты встраивают карты, видео с YouTube, виджеты оплаты и комментариев. Кстати, все превью в этом учебнике — тоже <iframe>.

Встроенная страница

Адрес встраиваемой страницы указывают в атрибуте src:

<iframe src="https://example.com"></iframe>

В превью появилось маленькое окошко с сайтом example.com — его можно прокручивать, а ссылки в нём работают. По умолчанию размер рамки 300 на 150 пикселей.

Размер и название

width и height задают размер рамки. Атрибут title кратко описывает содержимое — его зачитывает программа чтения с экрана, когда пользователь попадает в рамку:

<iframe src="https://example.com" width="400" height="200" title="Сайт example.com"
        style="border: 1px solid #ccc;"></iframe>

Стандартную рамку браузера обычно заменяют своей или убирают в CSS свойством border: none.

Карта

Многие сервисы дают готовый код для встраивания. Например, OpenStreetMap — карту по координатам:

<iframe width="400" height="250" title="Карта центра Лиссабона"
        src="https://www.openstreetmap.org/export/embed.html?bbox=-9.15,38.70,-9.13,38.72&layer=mapnik"></iframe>

Карту можно двигать и масштабировать прямо в превью. Видео с YouTube встраивают так же: в меню «Поделиться» есть пункт «Встроить», который выдаёт готовый <iframe>.

Своя разметка: srcdoc

Вместо адреса можно передать HTML прямо в атрибуте srcdoc. Страница внутри рамки полностью отделена от внешней — её стили не действуют снаружи, и наоборот:

<p style="color: crimson;">Этот текст снаружи — красный.</p>
<iframe srcdoc="<p>А этот внутри рамки — обычный.</p>" height="60"></iframe>

Стиль внешнего абзаца не повлиял на абзац в рамке: это отдельный документ.

Отложенная загрузка

Каждая встроенная страница грузится как целый сайт и замедляет ваш. Атрибут loading="lazy" откладывает загрузку, пока рамка не окажется рядом с видимой областью:

<p style="height: 200px;">Прокрутите вниз — карта загрузится, когда до неё дойдёт очередь.</p>
<iframe loading="lazy" width="300" height="150" title="Карта"
        src="https://www.openstreetmap.org/export/embed.html?bbox=-0.13,51.50,-0.12,51.51&layer=mapnik"></iframe>

Ограничения: sandbox

Атрибут sandbox (песочница) запрещает встроенной странице почти всё: запускать скрипты, отправлять формы, открывать окна. Нужное разрешают по одному словами через пробел:

<iframe sandbox="allow-scripts" title="Виджет"
        srcdoc='<button onclick="this.textContent = 1 + 1">Сколько будет 1 + 1?</button>'></iframe>

Нажмите кнопку — скрипт посчитает ответ. Без allow-scripts кнопка бы не сработала. Используйте sandbox, когда встраиваете содержимое, которому не до конца доверяете.

Частая ошибка

Встроить можно не любой сайт. Банки, почта и многие крупные сервисы запрещают показывать себя в чужих рамках, чтобы злоумышленники не могли обернуть их своей страницей и обманом заставить нажать не ту кнопку. Вместо сайта появится сообщение об отказе в подключении:

<iframe src="https://www.google.com" width="300" height="120" title="Google"></iframe>

Это не ошибка в вашем коде — ищите у сервиса специальный адрес для встраивания.