4.4 KiB
title | localeTitle |
---|---|
Iframes | Iframes |
Iframes
Элемент HTML <iframe>
представляет встроенный фрейм, который позволяет включать независимый HTML-документ в текущий HTML-документ. <iframe>
обычно используется для встраивания сторонних носителей, собственных медиафайлов, виджетов, фрагментов кода или вложений сторонних апплетов, таких как формы оплаты.
Атрибуты
Ниже перечислены некоторые атрибуты <iframe>
:
| Атрибут | Описание | | --- | --- | | allowfullscreen
| Установите значение true, чтобы позволить кадру быть помещенным в полноэкранный режим | | frameborder
| Указывает браузеру нарисовать рамку вокруг кадра (по умолчанию установлено 1) | | height
| Высота кадра в пикселях CSS | | name
| Имя кадра | | src
| URL-адрес веб-страницы для вставки | | width
| Ширина кадра в пикселях CSS |
Примеры
Внедрение видео YouTube с помощью <iframe>
:
<iframe width="560" height="315" src="https://www.youtube.com/embed/v8kFT4I31es"
frameborder="0" allowfullscreen></iframe>
Внедрение Google Maps с помощью <iframe>
:
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d774386.2436462595!2d-74.53874786161381!3d40.69718109704434!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York%2C+NY%2C+USA!5e0!3m2!1sen!2sau!4v1508405930424"
width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
Альтернативный текст
Содержимое между открывающим и закрывающим тегами <iframe>
используется как альтернативный текст, отображаемый, если браузер просмотра не поддерживает iframe.
<iframe width="560" height="315" src="https://www.youtube.com/embed/v8kFT4I31es" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>
Ориентация на iframe в ссылке
Любая ссылка <a>
может быть нацелена на содержимое элемента <iframe>
. Вместо того, чтобы перенаправлять окно браузера на связанную веб-страницу, он перенаправляет <iframe>
. Чтобы это работало, атрибут target
элемента <a>
должен соответствовать атрибуту name
<iframe>
.
<iframe width="560" height="315" src="about:blank" frameborder="0" name="iframe-redir"></iframe>
<p><a href="https://www.youtube.com/embed/v8kFT4I31es" target="iframe-redir">Redirect the Iframe</a></p>
В этом примере сначала будет отображаться пустой <iframe>
, но когда вы нажмете ссылку выше, она перенаправит <iframe>
чтобы показать видео YouTube.
Javascript и iframes
Документы, встроенные в <iframe>
могут запускать JavaScript в своем собственном контексте (без влияния на родительскую веб-страницу) как обычно.
Любое взаимодействие скриптов между родительской веб-страницей и содержимым встроенного <iframe>
подчиняется политике одного и того же происхождения. Это означает, что если вы загружаете содержимое <iframe>
из другого домена, браузер блокирует любую попытку доступа к этому контенту с помощью JavaScript.
Дополнительная информация:
См. Веб-документы MDN .