Главная HTML Фреймы - тег iframe

Фреймы

<iframe>

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

Обычно iframe используют в "много-много" страничных сайтах, где есть одинаковые фрагменты на страницах. Например, меню. Достаточно добавить/удалить пункт меню в фрейме-меню и на всех страницах, где на месте меню стоит фрейм-меню, не нужно вносить изменения.

Атрибуты тега <iframe>

Атрибут Значение
src - URL документа, который нужно загрузить в фрейм.
name - имя фрейма.
height = высота фрейма в пикселях или %.
width = ширина фрейма в пикселях или %.
scrolling - наличие полосы прокрутки.
scrolling ="yes"
scrolling ="no"
scrolling ="auto"
hspace = ширина в пикселях боковых пустых полей вокруг фрейма.
vspace = ширина в пикселях верхнего и нижнего пустых полей вокруг фрейма.
marginheight - ширина вертикальных отступов содержимого фрэйма от его верхней и нижней границ (действует для содержимого, не являющегося HTML - документом).
marginwidth - ширина горизонтальных отступов содержимого фрэйма от его боковых границ (действует для содержимого, не являющегося HTML - документом).
align выравнивание содержимого фрейма
= top - выравнивает верхнюю грвницу фрейма по верхней границе окружающего текста
= middle - выравнивает воображаемую центральную линию окружающего текста по воображаемой центральной линии фрейма
= bottom - совпадает с baseline (только в Internet Explorer)
= baseline - выравнивает нижнюю границу фрейма по базовой линии окружающего текста
= absbottom - выравнивает нижнюю границу фрейма по подстрочной линии символов окружающего текста
= absmiddle - выравнивает середину фрейма по центральной линии между top и absbottom окружающего текста
= left - выравние фрейма по левому краю элемента-контейнера
= right - выравние фрейма по правому краю элемента-контейнера
= texttop - выравнивает верхнюю границу фрейма по надстрочной линии символов окружающего текста
sandbox Позволяет задать ряд ограничений на контент загружаемый во фрейме, к примеру, блокировать действие скрипта в загружаемом фрейме. Это позволяет повысить безопасность текущего документа, особенно в том случае, когда во фрейм загружается документ из непроверенного источника. 
<body>                        
  <iframe> src="hello.html" sandbox></iframe>
</body>

1
Шаблон страницы сайта из 3-х <iframe>

Структура шаблона сайта:

<body>
  <div class="container">
     <div class="header">
         <iframe src="head.html"></iframe>
     </div>

     <div class="menu-left" style="float: left;">
         <iframe src="menu.html"></iframe>
     </div>

     <div class="content">
         ...контент...
         ...контент...
         <div class="clear"></div>
     </div>

     <div class="footer">
         <iframe src="footer.html"></iframe>
     </div>
  </div>
</body>

Смотреть пример 1 (шаблон сайта)

 

2
Вставка стороннего документа на свой сайт.
<body>
    ...
    <iframe src="https://caniuse.com/?search=iframe" loading="lazy" width="600" height="270">
    </iframe>
    ...    
</body>

В Примере 2 на эту страницу загружен (вставлен) документ расположенный на другом ресурсе.

Таблица кроссбраузерности тега iframe

Кроссбраузерность - свойство веб-сайта отображаться в различных браузерах.