65 lines
4.4 KiB
Markdown
65 lines
4.4 KiB
Markdown
---
|
||
title: Iframes
|
||
localeTitle: Iframes
|
||
---
|
||
## Iframes
|
||
|
||
Элемент HTML `<iframe>` представляет встроенный фрейм, который позволяет включать независимый HTML-документ в текущий HTML-документ. `<iframe>` обычно используется для встраивания сторонних носителей, собственных медиафайлов, виджетов, фрагментов кода или вложений сторонних апплетов, таких как формы оплаты.
|
||
|
||
### Атрибуты
|
||
|
||
Ниже перечислены некоторые атрибуты `<iframe>` :
|
||
|
||
| Атрибут | Описание | | --- | --- | | `allowfullscreen` | Установите значение true, чтобы позволить кадру быть помещенным в полноэкранный режим | | `frameborder` | Указывает браузеру нарисовать рамку вокруг кадра (по умолчанию установлено 1) | | `height` | Высота кадра в пикселях CSS | | `name` | Имя кадра | | `src` | URL-адрес веб-страницы для вставки | | `width` | Ширина кадра в пикселях CSS |
|
||
|
||
### Примеры
|
||
|
||
Внедрение видео YouTube с помощью `<iframe>` :
|
||
|
||
```html
|
||
|
||
<iframe width="560" height="315" src="https://www.youtube.com/embed/v8kFT4I31es"
|
||
frameborder="0" allowfullscreen></iframe>
|
||
```
|
||
|
||
Внедрение Google Maps с помощью `<iframe>` :
|
||
|
||
```html
|
||
|
||
<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.
|
||
|
||
```html
|
||
|
||
<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>` .
|
||
|
||
```html
|
||
|
||
<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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) . |