Как вставить iframe на сайт

.

Демо¶

Изображения и мультимедиа

Синтаксис¶

iframe>. iframe> 

Закрывающий тег обязателен.

Атрибуты¶

Определяет политику элемента

Разрешает для фрейма полноэкранный режим. Этот атрибут считается устаревшим атрибутом и переопределяется как allow=»fullscreen» .

Установите в значение true , если нужно разрежить вызывать функции API платежей. Этот атрибут считается устаревшим атрибутом и переопределяется как allow=»payment» .

Указывает, какой реферер отправить при получении ресурса фрейма

Позволяет задать ряд ограничений на контент загружаемый во фрейме.

Способ отображения полосы прокрутки во фрейме.

Определяет, что содержимое фрейма должно отображаться так, словно оно является частью документа.

Путь к файлу, содержимое которого будет загружаться во фрейм.

Хранит содержимое фрейма непосредственно в атрибуте.

allowfullscreen¶

Атрибут allowfullscreen разрешает для фрейма полноэкранный режим.

Синтаксис

iframe allowfullscreen>iframe> 

Значения

Значение по умолчанию

По умолчанию этот атрибут выключен.

height¶

Для изменения размеров фрейма средствами HTML предусмотрены атрибуты width и height . Допускается использовать значения в пикселях или процентах. Если установлена процентная запись, то размеры фрейма вычисляются относительно родительского элемента — контейнера, где находится элемент . В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width=»100%» означает, что фрейм будет занимать всю ширину веб-страницы.

Если значение высоты или ширины не заданы, то фрейм автоматически принимает размер 300х150 пикселей.

Синтаксис

iframe height="">iframe> 

Значения

Любое целое положительное число в пикселях или процентах.

Значение по умолчанию

width — 300 пикселей, height — 150 пикселей.

name¶

В обычном HTML-документе при переходе по ссылке в окне браузера текущий документ заменяется новым. Чтобы направить содержимое во фрейм, он должен иметь уникальное имя, задаваемое атрибутом name . В этом случае при создании ссылки у требуется указать атрибут target , в качестве значения которого выступает имя фрейма.

Синтаксис

iframe name="">. iframe> 

Значения

Для указания имени используется набор символов, включая числа и буквы. При обращении к фрейму по имени соблюдайте то же написание, что и в атрибуте name .

Значение по умолчанию

sandbox¶

Атрибут sandbox позволяет установить ряд ограничений на контент, загружаемый во фрейме, к примеру, блокировать формы и скрипты. Это позволяет повысить безопасность текущего документа, особенно в том случае, когда во фрейм загружается документ из непроверенного источника.

Синтаксис

1 2 3 4

iframe src="URL" sandbox="allow-same-origin || allow-top-navigation || allow-forms || allow-scripts" >iframe> 

Значения

Позволяет содержимому фрейма отправлять формы.

Разрешает открытие модальных окон, вроде тех, которые делаются с помощью функции alert в JavaScript.

Позволяет отключать возможность блокировки экрана.

Позволяет фрейму использовать Pointer Lock API.

Разрешает всплывающие окна (такие как window.open , target=»_blank» , showModalDialog ).

Разрешает фрейму использовать Presentation API.

Разрешает загружать содержание фрейма, воспринимая его из того же источника, что и родительский документ. Может использоваться для безопасного открытия контента, блокируя при этом всплывающие окна.

Разрешает запуск и выполнение скриптов. Создание всплывающих окон при этом запрещено.

Позволяет открывать ссылки фрейма в родительском документе.

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

При одновременном использовании значений allow-scripts и allow-same-origin , когда исходный и загружаемый документ одного происхождения, атрибут sandbox игнорируется.

Значение по умолчанию

scrolling¶

Если содержимое фрейма не помещается в отведённые размеры, автоматически появляются полосы прокрутки для просмотра информации. В некоторых случаях, полосы прокрутки нарушают дизайн веб-страницы, поэтому от них можно отказаться. Для управления отображением полос прокрутки используется атрибут scrolling .

Синтаксис

iframe scrolling="auto | no | yes">. iframe> 

Значения

• auto — Полосы прокрутки добавляются браузером только по необходимости, в том случае, когда содержимое фрейма превышает его видимую часть.
• no — Запрещает отображение полос прокрутки.
• yes — Всегда вызывает появление полос прокрутки, независимо от объёма информации.

Значение по умолчанию

seamless¶

Устанавливает, что содержимое фрейма должно отображаться так, словно оно является частью документа. При этом соблюдается ряд условий:

• игнорируется атрибут sandbox , если содержимое фрейма и родительского документа взяты из одного источника;
• ссылки во фрейме открываются не внутри фрейма, а в текущем документе;
• стили родительского документа применяются и к содержимому фрейма;
• фрейм считается блочным элементом, у которого ширина задана как auto ;
• высота формируется автоматически на основе содержимого.

Синтаксис

iframe seamless>iframe> 

Значения

Значение по умолчанию

По умолчанию этот атрибут выключен.

src¶

Указывает адрес файла, который будет загружаться во фрейм. Это может быть HTML-документ, изображение или серверная программа. Допустимо использовать не только путь к файлу, но также имя функции JavaScript, которое возвращает значение.

Синтаксис

iframe src="">. iframe> 

Значения

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию

srcdoc¶

Синтаксис

iframe srcdoc="">. iframe> 

Значения

HTML-код содержимого, включая необходимые теги.

Значение по умолчанию

width¶

Для изменения размеров фрейма средствами HTML предусмотрены атрибуты width и height . Допускается использовать значения в пикселях или процентах. Если установлена процентная запись, то размеры фрейма вычисляются относительно родительского элемента — контейнера, где находится элемент . В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width=»100%» означает, что фрейм будет занимать всю ширину веб-страницы.

Если значение высоты или ширины не заданы, то фрейм автоматически принимает размер 300х150 пикселей.

Синтаксис

iframe height="">iframe> 

Значения

Любое целое положительное число в пикселях или процентах.

Значение по умолчанию

width — 300 пикселей, height — 150 пикселей.

Спецификации¶

• Referrer Policy
• WHATWG HTML Living Standard
• HTML5
• HTML 4.01 Specification
• Screen Orientation API
• Presentation API

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

 html> head> meta charset="utf-8" /> title>IFRAMEtitle> head> body> iframe src="page/banner.html" width="468" height="60" align="left" > Ваш браузер не поддерживает встроенные фреймы! iframe> body> html> 

Как встроить страницу через

Тег позволяет встраивать контент (например, веб-страницы, видео) прямо в ваш документ HTML.

Простейший пример использования :

Атрибут src задаёт URL-адрес страницы, которую вы хотите встроить.

Атрибуты width и height — ширина и высота фрейма (можно задавать как в пикселях, так и в процентах).

Другие атрибуты

sandbox

Это важный атрибут с точки зрения безопасности. Он позволяет контролировать, какие активности разрешены внутри .

Значение allow-scripts разрешает выполнение скриптов внутри фрейма, а allow-same-origin позволяет фрейму обращаться к ресурсам его исходной страницы.

loading

Атрибут loading может помочь с оптимизацией производительности и отложить загрузку iframe до тех пор, пока это не будет необходимо.

allowfullscreen , allowpaymentrequest

Здесь всё просто и следует из названия:

• allowfullscreen : позволяет встроенному контенту открываться в полноэкранном режиме.
• allowpaymentrequest : позволяет встроенному контенту делать запросы на оплату.

title

Не забывайте об универсальных атрибутах, таких как title , которые способствуют улучшению доступности.

Стилизация

можно стилизовать, как и любой другой элемент. Но помните, что стили вашей родительской страницы не применяются к содержимому , и вы не сможете его стилизовать через CSS в родительском документе.

iframe

Отслеживание событий загрузки

Вы можете отслеживать событие load для , чтобы знать, когда встроенный контент загружен.

document.querySelector('iframe').addEventListener('load', function() < console.log('Iframe is loaded!'); >); 

Полезные ссылки

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Контейнер для чего угодно. Тег

Тег определяет раздел или секцию в HTML-документе. Это контейнер, который используется для группировки других элементов, таких как текст, изображения или другие теги, в разделы или блоки.

 
Заголовок секции
 
Какое-нибудь содержимое секции
 
 

• 6 октября 2023

Как добавить подпись в HTML. Тег

Устаревший атрибут align — выравнивание подписи относительно элемента .

Тег может использоваться только внутри элемента .

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

• 6 октября 2023

Метаданные HTML-страницы. Тег

Тег содержит метаданные о документе HTML. Он может включать такую информацию, как имя автора, название документа, ключевые слова и набор символов.

Атрибуты тега :

• charset — кодировка символов в документе.
• name — имя метаданных.
• content — значение метаданных.
• http-equiv — HTTP-заголовок для значения атрибута content .

Атрибут charset должен быть первым атрибутом в теге , а name и http-equiv нельзя использовать вместе.

• 4 октября 2023

Просто кнопка. Тег

Тег создаёт кликабельную кнопку, которая может запускать действия или события на веб-странице. Например, отправку или перезагрузку формы, запуск функции, открытие нового окна или добавление товара в корзину.

Атрибуты тега :

• name — имя кнопки.
• type — тип кнопки, по умолчанию — submit . Атрибут type необходим, если указан атрибут value .
• value — значение, которое будет отправлено на сервер при нажатии на кнопку.
• disabled — указывает, что кнопка должна быть отключена.
• form — одна или несколько форм, к которым принадлежит кнопка.
• formaction — URL-адрес файла, который будет обрабатывать ввод при нажатии кнопки.
• formenctype — указывает, как данные формы должны быть закодированы при отправке на сервер.
• formmethod — метод HTTP, используемый при отправке данных формы.
• formnovalidate — устанавливает, что данные формы не должны проверяться при отправке на сервер.
• formtarget — указывает, где отображать ответ после отправки формы.

• 4 октября 2023

Независимый контент. Тег

Тег в HTML используется для выделения содержимого, которое является независимым и самодостаточным. Это означает, что такой контент может быть переиспользоваться в разных местах без потери смысла.

 
Заголовок статьи
 
Текст статьи.
 
 

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

Не используйте для группировки элементов, которые не являются самостоятельными материалами, например, для списка продуктов или новостей.

• 3 октября 2023

Выпадающий список. Тег

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

Все опции списка должны быть обёрнуты в тег .

Атрибуты тега :

• autocomplete — подсказка для функции автозаполнения формы;
• disabled — делает элемент неактивным;
• form — связывает список с формой;
• multiple — позволяет выбрать несколько опций;
• name — задает имя элемента, которое будет отправляться на сервер;
• required — делает элемент обязательным для заполнения;
• size — задает количество строк в списке.

• 1 октября 2023

Встроенные CSS-стили для страницы с тегом

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

    body 
Добро пожаловать на мой сайт!
   

Атрибуты тега :

• type — MIME-тип таблицы стилей.
• media — типы носителей, для которы будет использоваться стиль.

• 29 сентября 2023

Изображение в HTML. Тег

Элемент используется для вставки изображений на веб-страницы.

У нет закрывающего тега. Он поддерживает изображения в различных форматах — например, JPEG, PNG, WebP, GIF, SVG.

Существуют определенные правила или стандарты использования тега , которые рекомендуются для большинства случаев в веб-разработке. Несмотря на то что конкретные требования могут варьироваться в зависимости от проекта, ниже приведены атрибуты и практики, которые часто рекомендуются к использованию.

• 28 сентября 2023

Как установить frame, iframe на сайт

Фрэймы позволяют легко отображать на вашем сайте информацию с других веб ресурсов, например, погоду, курс валюты или весь сайт. Это бывает незаменимо для организации сложных сайтов или веб программ.

iframe

В современной верстке на html5 используется тег iframe. Сегодня он поддерживается практически всеми браузерами. Частым примером его использования является YouTube, где чтобы поделиться видеороликом используется iframe код.

Задать его на сайте очень просто:

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

На одной странице можно указывать множество таких фрэймов. Однако, с точки зрения поисковой оптимизации фрэймами лучше не увлекаться.

frame

Второй тип фрэймов является предшественником iframe и работает на тегах frameset (это уже устаревающий вариант). Для организации таких фрэймов создайте отдельную страницу и пропишите следующий код:

Важной особенностью работы таких фрэймах является отсутствие тегов и на странице. Здесь мы видим, что подключаются сразу два сайта внутри frameset. В нем rows означает, что фрэймы будут распологаться друг за другом в строковом виде (если поставить cols — то стобиками). 20%,80% — первый фрэйм займет 20% всего пространства, а второй 80%. Если поставить *,* — то пространство поделится поровну.