Фреймы в HTML. Как загрузить содержимое другой страницы в текущую?

фреймы в html. как загрузить содержимое другой страницы в текущую?

Основы использования фреймов

В HTML-разметку страницы можно добавить содержимое другой страницы. Проще всего это реализуется с помощью копирования. Откройте любой файл, скопируйте его содержимое и вставьте внутрь другого файла. Такой подход имеет право на жизнь, но только в том случае, если вы имеете доступ к обоим файлам. Мы же рассмотрим фреймы, которые реализуют более широкий функционал.

Фрейм — это специальный HTML-элемент, осуществляющий загрузку страницы своего или чужого сайта, и добавляющий её разметку внутрь себя. При этом фрейм является отдельным документом, но существует внутри основного. Разметка, помещаемая внутрь фрейма, имеет полноценную структуру: основные теги (doctype, html, head, body), подключение собственных скриптов и стилей, возможно перемещение по ссылкам (при этом перезагружается только содержимое фрейма).

В HTML для использования фрейма есть элемент <iframe>. Загрузка стороннего документа происходит с указанием атрибута src, который должен содержать относительный или абсолютный URL-адрес. Закрывающий тег обязателен. Между открывающим и закрывающим тегом можно поместить текст, который будет показан пользователю, если его браузер не поддерживает фреймы (на практике не встречается).

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Добавление фрейма на страницу</title>
    </head>
    <body>
        <h3>Вставка главной страницы СoderBooster</h3>

         <iframe src="https://coder-booster.ru">
            Данный текст будет показан, если браузер
            не поддерживает фреймы.
        </iframe>
    </body>
</html>
пример отображения страницы, загруженной во фрейме
рис 1. Отображение документа, загруженного во фрейме

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

Дополнительные настройки

У элемента <iframe> есть несколько дополнительных атрибутов, с помощью которых можно осуществлять настройку отображения и поведения документа, загруженного во фрейме. Большинство из них должны быть заменены CSS стилями, поэтому мы рассмотрим только основные.

Атрибут align отвечает за выравнивание фрейма внутри родительского элемента. Если задать ему значение left, то фрейм будет прижат к левому краю контейнера, а текст станет обтекать его с правой стороны. Аналогичное поведение со значением right, но для выравнивания по правой стороне.

Для изменения размеров фрейма средствами HTML, можно использовать атрибуты width и height, которые отвечают за ширину и высоту контейнера. Значения ширины и высоты могут быть заданы в пикселях и процентах. Если они заданы в процентах, то размер фрейма вычисляется относительно родительского элемента.

Если HTML-разметку, загруженную в элемент <iframe>, невозможно отобразить полностью, то браузер автоматически добавит внутрь него полосы прокрутки. Для явного управления этим поведением есть атрибут scrolling.

Типы значений атрибута scrolling:

  • auto — полосы прокрутки показываются только в том случае, если содержимое не помещается во фрейме полностью.
  • yes — полосы прокрутки показываются всегда, независимо от занимаемого пространства, загруженного документа.
  • no — полосы прокрутки не показываются ни в каком случае.
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Примеры использования атрибутов</title>
    </head>
    <body>
        <iframe src="https://coder-booster.ru"
            height="400px" width="100%" align="left">
        </iframe>
    </body>
</html>

Последние публикации