Iframe src

Элемент

Frames

Что же делает <iframe>?

Как вставить страницу в страницу HTML? Для этого нужно использовать <iframe>, который создает в текущем документе встроенный фрейм, в котором отображается другой HTML-документ.

Отображение

Display block.

Пример кода

Мощный, но легкий в использовании

Еще в старые недобрые времена веб-дизайна было много <frame> элементов, портящих жизнь каждого разработчика. Они почти всегда были плохим подходом к дизайну. К счастью, элемент <frame> был объявлен устаревшим в HTML5. Но <iframe> или «встроенный фрейм» по-прежнему доступен. Будет ли он устаревшим в следующей версии? Может, стоит его избегать? Есть несколько допустимых вариантов использования этого элемента при создании HTML страницы. Но нужно понять, что это такое и как оно работает, чтобы избежать ошибок.


Сходства и различия <iframe> и <frame>

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

Основное различие между <iframe> и <frame> заключается в том, что <iframe> обеспечивает соблюдение правила, о том, что HTML документ в приоритете. Содержимое <iframe> отображается внутри элемента, который является частью текущего документа. В качестве примера рассмотрим это встроенное видео, взятое из YouTube:

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

Не переделывайте макеты на основе фреймов с помощью iframe

Когда-нибудь вам может попасться задача по обновлению старого сайта, который был построен с использованием фреймов. Возможно, вы захотите использовать <iframe> и фиксированную ширину макета, чтобы воссоздать тот же кошмар из независимых панелей и подокон. Но вы не сможете использовать атрибут target, чтобы открыть ссылку в отдельном фрейме. Вы можете начать искать решения на JavaScript. Пожалуйста, не делайте этого.

Удачное (и ужасное) применение <iframe>

Существует несколько допустимых вариантов использования <iframe> для создания HTML страницы:

  • встраивание стороннего медиа контента;
  • встраивание собственного медиа контента через кроссплатформенный документ;
  • встраивание примеров кода;
  • встраивание сторонних «апплетов» в качестве форм оплаты.

А вот некоторые ужасные варианты использования <iframe>:

  • Фотогалерея;
  • форум или чат.

Если вам нужно встроить независимые, уже существующие HTML-документы в текущий, используйте <iframe>. Если же вы строите все с нуля, нет никаких причин разбивать дизайн страницы на несколько самостоятельных документов. Особенно если они на самом деле не являются независимыми частями контента.

www.internet-technologies.ru

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

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

Синтаксис
<iframe …>… </iframe>


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

Параметры
align — определяет как фрейм будет выравниваться по краю, а также способ обтекания его текстом.
frameborder — отображать границу вокруг фрейма или нет.
height — высота фрейма.
hspace — горизонтальный отступ от фрейма до окружающего контента.
name — имя фрейма.
scrolling — способ отображения полосы прокрутки во фрейме.
src — путь к файлу, содержимое которого будет загружаться во фрейм.
vspace — вертикальный отступ от фрейма до окружающего контента.
width — ширина фрейма.

Пример 1. Использование тега IFRAME


Описание параметров тега IFRAME

Параметр ALIGN

Описание
Для плавающего фрейма можно указать его положение на веб-странице или задать способ обтекания текстом или другими элементами веб-страницы. Способ выравнивания задается параметром align тега iframe.

Синтаксис
<iframe align=absmiddle | baseline | bottom | left | middle | right | texttop | top>…</iframe>

Аргументы
В таблице 1 перечислены возможные значение параметра align и результат его использования.


Таблица 1. Использование значений параметра align
Код HTML Описание
<iframe src=sample.gif align=absmiddle> Выравнивание середины фрейма по середине текущей строки.
<iframe src=sample.gif align=baseline> Выравнивание фрейма по базовой линии текущей строки.
<iframe src=sample.gif align=bottom> Выравнивание нижней границы фрейма по окружающему тексту.
<iframe src=sample.gif align=left> Выравнивает фрейм по левому краю окна.
<iframe src=sample.gif align=middle> Выравнивание середины фрейма по базовой линии текущей строки.
<iframe src=sample.gif align=right> Выравнивает фрейм по правому краю окна.
<iframe src=sample.gif align=texttop> Верхняя граница фрейма выравнивается по самому высокому текстовому элементу текущей строки.
<iframe src=sample.gif align=top> Верхняя граница фрейма выравнивается по самому высокому элементу текущей строки.

Наиболее популярные параметры — left и right, создающие обтекание текста вокруг фрейма. Чтобы текст не прилегал плотно к содержимому фрейма, рекомендуется в теге iframe добавить параметр hspace и vspace, задающих расстояние до текста в пикселах.

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

Пример 2. Выравнивание плавающего фрейма



Параметр FRAMEBORDER

Описание
По умолчанию вокруг содержимого фрейма рисуется рамка с эффектом трехмерности. Чтобы ее скрыть применяется параметр frameborder. Чтобы показать простую рамку вокруг фрейма воспользуйтесь стилями.

Синтаксис
<iframe frameborder=yes | no>…</iframe>
<iframe frameborder=0 | 1> …</iframe>

Аргументы
yes или 1 — отображает рамку вокруг фрейма.
no или 0 — скрывает рамку вокруг фрейма.

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

Пример 3. Убираем рамку вокруг фрейма


Параметр HEIGHT и WIDTH

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


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

Синтаксис
<iframe height=высота>…</iframe>
<iframe width=ширина>…</iframe>

Аргументы
Любое целое положительное число в пикселах или процентах.

Значение по умолчанию
width — 300 пикселов, height — 150 пикселов.

Пример 4. Изменение размеров фрейма


Параметр HSPACE и VSPACE

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

Синтаксис
<iframe hspace=поля по горизонтали>…</iframe>
<iframe vspace=поля по вертикали>…</iframe>

Аргументы
Любое целое положительное число в пикселах.

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

Пример 5. Отступы вокруг фрейма


Параметр NAME

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


Синтаксис
<iframe name=имя>…</iframe>

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

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

Пример 6. Использование имени фрейма


Параметр SCROLLING

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

Синтаксис
<iframe scrolling=auto | no | yes>…</iframe>

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

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

Пример 7. Скрытие полос прокрутки во фрейме



Параметр SRC

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

Синтаксис
<iframe src=URL>…</iframe>

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

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

Пример 8. Путь к файлу

in-sites.ru

Использование в веб-сайтах

Суть плавающих фреймов заключается в возможности встраивать обыкновенные фреймы (с указанием источника), являющиеся HTML-документами, в другие веб-страницы. При этом тег <frameset> не используется. Таким образом, с помощью плавающих фреймов на странице создается область с полосами прокрутки (inline frame) для демонстрации содержимого другой страницы.

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

Пример использования плавающего фрейма:

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


Параметры тега

Тег <iframe> также имеет дополнительные настраиваемые параметры:

  • align — выравнивание фрейма по краю, и указание способа обтекания текстом (возможные значения <align=»absmiddle | baseline | bottom | left | middle | right | texttop | top»>);
  • frameborder — задет наличие границы вокруг фрейма (логическая);
  • height — задает высоту фрейма;
  • hspace — задает отступ по горизонтали от фрейма до ближайшего окружающего контента;
  • name — задает имя фрейма, используется при создании ссылки тегом <A> с параметром target;
  • scrolling — отображения полосы прокрутки во фрейме (yes, no, auto);
  • src — адрес файла, отображаемого во фрейме;
  • vspace — отступ по вертикали от фрейма до ближайшего окружающего контента;
  • width — задает ширину фрейма.

Поддержка браузерами

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

Тег поддерживают:


  • Internet Explorer — начиная с версии 5.5;
  • Netscape — начиная с версии 8.0;
  • Opera — начиная с версии 7.0;
  • Safari — начиная с версии 1.3;
  • Firefox — начиная с версии 1.5.

dic.academic.ru

Синтаксис

<iframe>...</iframe> 

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

WAI ARIA

Нет значения role по-умолчанию.

Допустимые значения role:

  • application
  • document
  • img

Атрибуты

  • allowfullscreen — Разрешает для фрейма полноэкранный режим.
  • height — Высота фрейма.
  • name — Имя фрейма.
  • sandbox — Позволяет задать ряд ограничений на контент загружаемый во фрейме.
  • scrolling — Способ отображения полосы прокрутки во фрейме.
  • seamless — Определяет, что содержимое фрейма должно отображаться так, словно оно является частью документа.
  • src — Путь к файлу, содержимое которого будет загружаться во фрейм.
  • srcdoc — Хранит содержимое фрейма непосредственно в атрибуте.
  • width — Ширина фрейма.

allowfullscreen

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

Синтаксис

<iframe allowfullscreen></iframe> 

Значения

Нет.

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

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

height

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

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

Синтаксис

<iframe height="<значение>"></iframe> 

Значения

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

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

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

name

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

Синтаксис

<iframe name="<имя>">...</iframe> 

Значения

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

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

Нет.

sandbox

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

Синтаксис

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

Значения

  • allow-forms — Позволяет содержимому фрейма отправлять формы.
  • allow-modals — Разрешает открытие модальных окон, вроде тех, которые делаются с помощью функции alert в JavaScript.
  • allow-orientation-lock — Позволяет отключать возможность блокировки экрана.
  • allow-pointer-lock — Позволяет фрейму использовать Pointer Lock API.
  • allow-popups — Разрешает всплывающие окна (такие как window.open, target="_blank", showModalDialog).
  • allow-presentation — Разрешает фрейму использовать Presentation API.
  • allow-same-origin — Разрешает загружать содержание фрейма, воспринимая его из того же источника, что и родительский документ. Может использоваться для безопасного открытия контента, блокируя при этом всплывающие окна.
  • allow-scripts — Разрешает запуск и выполнение скриптов. Создание всплывающих окон при этом запрещено.
  • allow-top-navigation — Позволяет открывать ссылки фрейма в родительском документе.

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

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

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

Нет.

scrolling

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

Синтаксис

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

Значения

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

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

  • auto

seamless

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

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

Синтаксис

<iframe seamless></iframe> 

Значения

Нет.

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

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

src

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

Синтаксис

<iframe src="<адрес>">...</iframe> 

Значения

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

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

Нет.

srcdoc

Позволяет установить содержимое фрейма непосредственно в атрибуте. Значение должно иметь корректный синтаксис HTML, по желанию содержать <!DOCTYPE> и <html>, а также любое количество пробелов, переносов строк, комментариев и других элементов. При одновременном использовании атрибутов src и srcdoc, атрибут src игнорируется.

Синтаксис

<iframe srcdoc="<html-код>">...</iframe> 

Значения

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

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

Нет.

width

Для изменения размеров фрейма средствами HTML предусмотрены атрибуты width и height. Допускается использовать значения в пикселях или процентах. Если установлена процентная запись, то размеры фрейма вычисляются относительно родительского элемента — контейнера, где находится элемент <iframe>. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, 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

Примеры

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

xsltdev.ru

Возможности iframe

Итак, с помощью этого парного тега можно вставить в свою статью страницу с любого веб-сайта в интернете. Давайте рассмотрим вот такой фрагмент кода:

<iframe width="650" height="600" src="http://mysite.ru" name="iframe" scrolling="auto"> </iframe>

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

Адрес нужной страницы задается в атрибуте src. В нем нужно написать полный адрес до сайта. Следующий атрибут – имя фрейма. Тут можно написать произвольное значение. Наконец, scrolling отвечает за появление полос прокрутки, а его значение auto делает так, что прокрутка появится только при необходимости. Также тут можно задать значение no. В этом случае полосы прокрутки не будут появляться, но тогда и прокрутить страницу нельзя будет — вы сможете только просмотреть ее фрагмент, на сколько хватит заданной высоты.

Остальные параметры при необходимости вы можете задать через css. Например, это могут быть отступы или рамка.

Пример вставки iframe в html

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

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

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

dolinacoda.ru

В HTML5 использование фреймов запрещено. Они считаются устаревшими элементами, и их использование на данный момент действительно не имеет смысла. Но при желании вы можете прочитать о них здесь. Из всего семейства фреймов сейчас используется тег <iframe> (индивидуальный, или плавающий фрейм), который позволяет вставить на текущую страницу сайта другую страницу или некий код. Он очень часто используется для добавления видео с Youtube, например.

Что такое фрейм? Это блок в виде специальной прямоугольной области с собственными полосами прокрутки (scrollbars).  Основным атрибутом этого элемента является src, в значении которого указывается абсолютный или относительный URL вставляемого документа (похоже на тег <img>, не так ли?). HTML 5, однако, предлагает альтернативный вариант — вы можете указать исходный код дочерней страницы непосредственно в атрибуте srcdoc, без необходимости хранить ее отдельно. Естественно, этот код должен быть экранирован и соответствовать стандарту HTML.

Если вы заполняете оба атрибута, то браузер должен отдать предпочтение srcdoc, проигнорировав src. В таком случае целесообразно указывать в атрибуте src адрес копии документа, содержащегося в srcdoc. Это позволит корректно отобразить страницу даже в браузерах, не поддерживающих HTML 5.

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

Стандартом HTML 5 более не поддерживаются атрибуты, отвечающие за графическое оформление фреймов. Даже необходимость отображения полос прокрутки теперь определяется только инструкциями CSS. Однако все еще можно указать ширину и высоту фрейма, присвоив ему атрибуты width и height соответственно. Значения их, как и в случае с <img />, указываются в пикселях или процентах. Чаще указывают в пикселях, т.к. % подразумевают, что ширина или высота берутся от соответствующих размеров родительского элемента.

Остался также атрибут name, позволяющий озаглавить фрейм. Если указать имя фрейма в атрибуте target какой-либо ссылки, то документ, на который она ссылается, при нажатии по ней откроется в указанном фрейме.

Забавно, но пример этого кода вы тоже будете смотреть в теге iframe, но уже для этой страницы (посмотреть в отдельной вкладке).

Еще один атрибут, пришедший из HTML4: scrolling  = «auto | no | yes»— указывает способ отображения полосы прокрутки во фрейме. Его значения расшифровываются так:

HTML 5 предоставляет еще два новых атрибута для управления фреймами. Установленный булев атрибут seamless="seamless" означает, что браузер должен обрабатывать содержимое вставленного документа так, как будто оно является частью основного документа. В частности, на него будут действовать инструкции CSS, подключенные к странице-родителю. Кроме того, ссылки дочерней страницы будут открываться в основном (родительском) окне браузера, а не в самом фрейме, как это происходит по умолчанию. Также ширина и высота <iframe> будут автоматически установлены браузером так, как будто фрейм является обычным блочным элементом. Помните, что не все браузеры поддерживают HTML 5 и атрибут seamless в частности. Поэтому, когда все же нужно его применить, рекомендуется подключать к дочернему документу необходимые стили CSS и указывать в элементе <base /> атрибут target="_parent", чтобы обеспечить правильное функционирование ссылок.

Этот атрибут может быть использован в следующих вариантах

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

  • отправка данных из форм на сервер;
  • применение скриптов;
  • размещение ссылок, указывающих на другие окна и фреймы (нельзя использовать атрибут target);
  • применение плагинов с элементами <embed /> и <object>;
  • использование атрибута seamless во вложенных фреймах;
  • доступ к содержимому родительского документа, включая cookie и localStorage, путем принудительной унификации источника страницы, даже если это фактически один и тот же документ (применяется при необходимости сохранить возможность скриптования в пределах дочернего документа, ограничив доступ к родительскому).

Значением атрибута sandbox может быть набор из перечисленных ниже ключевых слов, которые указываются через пробел. Каждое из них снимает некоторые из вышеуказанных ограничений:

"" применяет все ограничения, снимаемые перечисленными ниже значениями. Таким образом ограничивая содержимое фрейма влиять на родительский элемент, изолируя страницу, отображаемую во фрейме, в виртуальной песочнице, поэтому любой вредоносный код не сможет нанести вред родительской странице, сайту или компьютеру пользователя.
allow-forms разрешает отправку данных с помощью форм.
allow-scripts разрешает выполнение сценариев (исключая всплывающие окна).
аllow-same-origin указывает, что информация представленная в iframe имеет тот же источник, что и информация представленная в содержащем его документе. Отключает принудительную блокировку доступа к родительскому документу.
аllow-top-navigation разрешает ссылаться на документ верхнего уровня. Т.е. разрешает использовать ссылки внутри содержимого iframe для перемещения по содержащему его документу. Остальные окна и фреймы остаются под защитой атрибута sandbox.

Пример использования сразу всех значений атрибута:

Помните, что использование sandbox не гарантирует безопасности при отображении загруженного на сервер пользовательского кода, поскольку злоумышленник может загрузить вредоносную страницу непосредственно в главном окне браузера, обойдя действие атрибута. Для более надежной защиты необходимо обеспечить вывод пользовательских страниц с указанием MIME-типа text/html-sandboxed вместо text/html.
Примечание: атрибут sandbox не поддерживается в IE9 и более ранних версиях, и в Opera.

Есть еще ряд атрибутов, которые использовались в HTML4, но для HTML5 являются устаревшими и должны быть заменены css-правилами:

  • align — определяет, как фрейм будет выравниваться по краю, а также способ обтекания его текстом. Замена — float и vertical-align
  • frameborder -устанавливает, отображать границу вокруг фрейма или нет. Замена — border
  • hspace — горизонтальный отступ от фрейма до окружающего контента. Замена — padding
  • vspace — вертикальный отступ от фрейма до окружающего контента. Замена — padding
  • marginheight — отступ сверху и снизу от содержания до границы фрейма. Замена — margin
  • marginwidth — отступ слева и справа от содержимого до границы фрейма. Замена — margin

Вставка видео с Youtube

Достаточно часто используемое действие на различных сайтах. Для того чтобы это сделать, нужно воспользоваться кодом, предоставляемым самим сервисом youtube. Нужно под видео выбрать ссылку поделиться, затем нажать на «HTML-код» и скопировать его. После этого вставляете код в соответствующее место на странице сайта.

Код с youtube.com

Совет: если Вы используете CMS WordPress, делать это нужно не в визуальном, а в текстовом редакторе, чтобы код с угловыми скобками не был преобразован в спецсимволы типа &lt; и &gt;.

Метки: iframe src

You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector