Привет друзья! Сегодня мы с вами разберем такой классный тег iframe. Он позволяет вам отображать чужой сайт на вашем сайте, т.е. вы можете вставить чужой сайт к вам на страницу. 👍
Отображаемый контент другого сайта на вашем сайте - можно использовать например для показа рекламы (как делают на сайтах с фильмами) или для отображения сопутствующей информации. У этого тега iframe - можно пометить границы отображаемого контента, можно установить ширину width и высоту height отображаемой области сайта на экране. 😊
iframe - это контейнер, содержание которого игнорируется браузерами, не поддерживающими данный элемент. Для таких браузеров указывается альтернативный текст, который увидят пользователи. Он располагается между открывающим и закрывающим тегами iframe.
Синтаксис
[iframe]...[/iframe]
Атрибуты
Align - Определяет как фрейм будет выравниваться по краю, а также способ обтекания его текстом.
Allowtransparency - Устанавливает прозрачный фон фрейма, через который виден фон страницы.
Frameborder - Устанавливает, отображать границу вокруг фрейма или нет.
Height - Высота фрейма.
Hspace - Горизонтальный отступ от фрейма до окружающего контента.
Marginheight - Отступ сверху и снизу от содержания до границы фрейма.
Marginwidth - Отступ слева и справа от содержания до границы фрейма.
Name - Имя фрейма.
Sandbox - Позволяет задать ряд ограничений на контент загружаемый во фрейме.
Значения
- 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 - Позволяет открывать ссылки фрейма в родительском документе.
Scrolling - Способ отображения полосы прокрутки во фрейме.
Значения
- auto - Полосы прокрутки добавляются браузером только по необходимости, в том случае, когда содержимое фрейма превышает его видимую часть.
- no - Запрещает отображение полос прокрутки.
- yes - Всегда вызывает появление полос прокрутки, независимо от объёма информации.
Seamless - Определяет, что содержимое фрейма должно отображаться так, словно оно является частью документа.
Src - Путь к файлу, содержимое которого будет загружаться во фрейм.
Srcdoc - Хранит содержимое фрейма непосредственно в атрибуте.
Vspace - Вертикальный отступ от фрейма до окружающего контента.
Width - Ширина фрейма.
Помните что контент внутри этого тега браузерами не индексируется с привязкой к вашему сайту! Он индексируется на том сайте, который вы подключаете. 😊
Пример из видео:
[!DOCTYPE html]
[html lang="en"]
[head]
[meta charset="UTF-8"]
[title]Document[/title]
[/head]
[body]
[h1]Пример отображения сайта внутри другого сайта[/h1]
[p]наш контент наш контент наш контент [/p]
[iframe src="здесь вставьте ссылку на сайт донер 😊 " frameborder="1" width="800px" height="400px"][/iframe]
[/body]
[/html]
*** Не забываем, что Ютуб не дает писать угловые скобки - поэтому здесь они заменены на квадратные!!! - для использования кода - сделайте наоборот 😊
Дополнительное описание, домашние задания и многое другое можно найти на сайте WISEPLAT: wiseplat.org/
1) Урок на сайте Wiseplat:
✔ Сообщество программистов: wiseplat.org/
✔ -------------
Вступай в группу Вк - wiseplat 🚀
Группа FaceBook - / wiseplat
Инстаграм Wiseplat: / wiseplat
Instagram: / shpaginoleg
Twitter - / wiseplatschool
********************************
Если Вам понравилась публикация, подписывайтесь на канал!
Ставьте лайки, тогда будем еще писать такой контент :)
Если есть вопросы или пожелания, то пишите, в комментариях.
********************************
- Уроки от #OlegShpagin 👨🏼💻
#урокиhtml #урокиcss #iframe
24 дек 2019
