Привет друзья! Сегодня мы с вами разберем такой классный тег 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]Документ[/title]
[/head]
[body]
[h1]Пример отображения сайта внутри другого сайта[/h1]
[p]наш контент наш контент наш контент [/p]
[iframe src=»здесь вставьте ссылку на сайт донер 😊 » frameborder=»1″ width=»800px» height=»400px»][/iframe]
[/body]
[/html]
*** Не забываем, что Ютуб не дает писать угловые скобки – поэтому здесь они заменены на квадратные!!! – для использования кода — сделайте наоборот 😊
Дополнительное описание, домашние задания и многое другое можно найти на сайте WISEPLAT:
1) Урок на сайте Wiseplat:
✔ Сообщество программистов:
✔ ————-
Вступай в группу Вк — 🚀
Группа FaceBook —
Инстаграм Wiseplat:
Instagram:
Twitter —
********************************
Если Вам понравилась публикация, подписывайтесь на канал!
Ставьте лайки, тогда будем еще писать такой контент 🙂
Если есть вопросы или пожелания, то пишите, в комментариях.
********************************
— Уроки от #OlegShpagin 👨🏼💻
#урокиhtml #урокиcss #iframe про ошибка битрикс.
