Хочешь сайт? Легко!

Фрейм представляет собой прямоугольную область, куда можно загрузить отдельную веб-страницу или даже другой сайт. Это позволяет вставлять на сайт рекламные баннеры Google AdSense, карты Google Maps, видео YouTube и многое другое.

Во фрейм можно загружать HTML-документ и прокручивать его содержимое независимо от остального материала на веб-странице. На рис. 1 приведён пример такого фрейма.

Фрейм на веб-странице

Рис. 1. Фрейм на веб-странице

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

Пример 1. Использование <iframe>

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>iframe</title>
 </head>
 <body>
  <p><iframe src="page/hsb.html"></iframe></p>
 </body>
</html>

Фрейм по умолчанию выводится размером 300x150 пикселей и рамкой толщиной 2 пикселя. Для указания точных размеров фрейма применяются атрибуты width и height, которые, соответственно, определяют ширину и высоту фрейма. В примере 2 показана вставка с YouTube видеоролика заданного размера. Чтобы во фрейм загрузить видео с другого сайта или даже сам сайт целиком, в атрибуте src достаточно указать его полный адрес.

Пример 2. Добавление видеоролика

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>iframe</title>
 </head>
 <body>
  <iframe width="560" height="315" 
   src="https://youtube.com/embed/4VK0DQhCIuU" 
   allowfullscreen></iframe>
 </body>
</html>

В данном примере во фрейм размером 560x315 пикселей вставляется видеоролик (рис. 2). Чтобы была возможность просматривать видео в полноэкранном режиме, к <iframe> также добавлен атрибут allowfullscreen. Без этого атрибута в полноэкранный режим переходить нельзя и видео всегда отображается во фрейме заданных размеров.

Видеоролик во фрейме

Рис. 2. Видеоролик во фрейме

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