Встраивание веб-страниц с помощью HTML-iframe

Введение

Тег <iframe> используется для встраивания одной веб-страницы в другую веб-страницу. В этом практическом занятии вы научитесь использовать тег <iframe> для отображения другой веб-страницы внутри текущей веб-страницы.

Примечание: Вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем можно обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/MultimediaandGraphicsGroup -.-> html/embed_media("Embedding External Media") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/embed_media -.-> lab-70775{{"HTML-страница, встроенная в HTML"}} html/inter_elems -.-> lab-70775{{"HTML-страница, встроенная в HTML"}} html/custom_attr -.-> lab-70775{{"HTML-страница, встроенная в HTML"}} end

Добавление тега `<iframe>` в ваш HTML-файл

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

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

Настройка высоты и ширины `<iframe>`

Вы можете использовать атрибуты height и width для настройки размера <iframe> в соответствии с вашими требованиями. Атрибуты height и width принимают значения в пикселях, процентах или эм. Вот пример:

<iframe src="https://www.example.com" height="500" width="500"></iframe>

Управление функциями отображения с помощью атрибутов `sandbox` и `allow`

Вы можете использовать атрибуты sandbox и allow для управления различными функциями <iframe>, такими как разрешение на полноэкранный режим отображения, возможность выполнения сценариев внутри <iframe>. Вот пример:

<iframe
  src="https://www.example.com"
  sandbox="allow-modals allow-forms"
></iframe>

Использование альтернативного контента

Рекомендуется использовать тег <iframe> с альтернативным контентом для отображения, если браузер не поддерживает встраиваемые фреймы. Вы можете добавить альтернативный текст между открывающим и закрывающим тегами <iframe>, который будет отображаться, если тег <iframe> не поддерживается. Вот пример:

<iframe src="https://www.example.com" height="500" width="500"
  >Ваш браузер не поддерживает встраиваемые фреймы.</iframe
>

Резюме

Поздравляем! Вы узнали, как использовать тег <iframe> для отображения другой веб-страницы внутри вашей текущей веб-страницы. Не забудьте установить атрибут src в URL веб-страницы, которую вы хотите отобразить, и использовать атрибуты height и width для настройки отображения в соответствии с вашими требованиями. Вы также можете использовать атрибуты sandbox и allow для управления различными функциями <iframe>. Кроме того, обязательно включайте альтернативный контент для браузеров, которые не поддерживают тег <iframe>.

HTML-страница, встроенная в HTML