Iframe ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹: Π’Π΅Π³ | HTML справочник

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

Π’Π΅Π³ | HTML справочник

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ

ОписаниС

HTML Ρ‚Π΅Π³ <iframe> опрСдСляСт Π²ΡΡ‚Ρ€ΠΎΠ΅Π½Π½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ (Ρ€Π°ΠΌΠΊΡƒ), которая ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ содСрТимоС ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ взятого Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ Π²Π΅Π±-сайта Π² ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΠΎΠΌ пространствС Π½Π° Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ Π²Π΅Π±-страницС. Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ Π²Π½ΡƒΡ‚Ρ€ΠΈ области сущСствуСт нСзависимо ΠΎΡ‚ ΠΎΠΊΡ€ΡƒΠΆΠ°ΡŽΡ‰Π΅ΠΉ страницы. Π”Π²Π΅ страницы: Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠ°Ρ ΠΈ дочСрняя, отобраТаСмая Π² Ρ€Π°ΠΌΠΊΠ΅, ΠΌΠΎΠ³ΡƒΡ‚ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ с Π΄Ρ€ΡƒΠ³ΠΎΠΌ Ρ‡Π΅Ρ€Π΅Π· JavaScript ΠΈΠ»ΠΈ сСрвСрный язык программирования.

Атрибут src ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ URL-адрСс страницы для Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Π²ΠΎ Π²ΡΡ‚Ρ€ΠΎΠ΅Π½Π½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ, Π½ΠΎ сам элСмСнт <iframe> Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ тСкст ΠΈΠ»ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ Π² качСствС Ρ€Π΅Π·Π΅Ρ€Π²Π½ΠΎΠ³ΠΎ содСрТимого для отобраТСния Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…, Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‰ΠΈΡ… этот элСмСнт (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€: ΠΎΡ‡Π΅Π½ΡŒ старыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹, тСкстовыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅).


<iframe src="news.html">
  <p>Π˜Π·Π²ΠΈΠ½ΠΈΡ‚Π΅, Π½ΠΎ ваш Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ содСрТимоС Ρ„Ρ€Π΅ΠΉΠΌΠ°, Π½ΠΎ
    Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ сами ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π½Π° <a href="news.
html">страницу с новостями</a>. </p> </iframe>

Π›ΡŽΠ±Ρ‹Π΅ CSS стили, примСняСмыС ΠΊ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠΌΡƒ элСмСнту, Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ ΠΊ содСрТимому встроСнной области, Ρ‚Π°ΠΊΠΆΠ΅ ΠΊΠ°ΠΊ стили, ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½Π½Ρ‹Π΅ ΠΊ встроСнному содСрТимому, Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°ΡΠΏΡ€ΠΎΡΡ‚Ρ€Π°Π½ΡΡ‚ΡŒΡΡ Π½Π° Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ элСмСнт.

МоТно ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ для встроСнной области с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² width ΠΈ height ΠΈΠ»ΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS. ΠžΠ±Ρ‹Ρ‡Π½ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Ρ€Π°Π²Π΅Π½ 300px Π² ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ 150px Π² высоту, Π½ΠΎ, Π² зависимости ΠΎΡ‚ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΠ½Ρ‹ΠΌ. Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ содСрТимоС элСмСнта <iframe> с ΡƒΠ·ΠΊΠΎΠΉ Ρ€Π°ΠΌΠΊΠΎΠΉ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΈΠ»ΠΈ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS свойства border.

Если содСрТимоС Ρ‚Π΅Π³Π° <iframe> ΠΏΡ€Π΅Π²Ρ‹ΡˆΠ°Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ элСмСнта, Ρ‚ΠΎ ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Ρ‚ΡŒ содСрТимоС Π²ΠΎ встроСнной области. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS объявлСния overflow: hidden, Π½ΠΎ Π² этом случаС Ρƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ возмоТности ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ скрытоС содСрТимоС.

Атрибуты

height:
Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ высоту элСмСнта Π² пиксСлях. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Β»
name:
ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ имя для элСмСнта.

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ этого Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ использовано для ссылки Π½Π° элСмСнт Π² JavaScript, Π»ΠΈΠ±ΠΎ Π² качСствС значСния для Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° target элСмСнта <a> ΠΈΠ»ΠΈ <form>, Π»ΠΈΠ±ΠΎ Π² качСствС значСния для Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° formtarget элСмСнта <button> ΠΈΠ»ΠΈ <input>. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Β»

sandbox:
ΠŸΡ€ΠΈΠΌΠ΅Π½ΡΠ΅Ρ‚ Π½Π°Π±ΠΎΡ€ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠΉ Π½Π° содСрТимоС встроСнной области Π² качСствС ΠΌΠ΅Ρ€Ρ‹ бСзопасности Π² случаС, Ссли Π² Π½Π΅ΠΉ отобраТаСтся Π½Π΅Π½Π°Π΄Π΅ΠΆΠ½Ρ‹ΠΉ Π²Π΅Π±-сайт.

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π»ΠΈΠ±ΠΎ пустая строка (sandbox=»»), это Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ всС ограничСния, Π»ΠΈΠ±ΠΎ список ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ, Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… ΠΏΡ€ΠΎΠ±Π΅Π»Π°ΠΌΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΡΠ½ΠΈΠΌΠ°Ρ‚ΡŒ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹Π΅ ограничСния:

  • «» — примСняСт всС ограничСния, снимаСмыС пСрСчислСнными Π½ΠΈΠΆΠ΅ значСниями. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ограничивая содСрТимоС Ρ„Ρ€Π΅ΠΉΠΌΠ° Π²Π»ΠΈΡΡ‚ΡŒ Π½Π° Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ элСмСнт, изолируя страницу, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΡƒΡŽ Π²ΠΎ Ρ„Ρ€Π΅ΠΉΠΌΠ΅, Π² Π²ΠΈΡ€Ρ‚ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ пСсочницС, поэтому любой врСдоносный ΠΊΠΎΠ΄ Π½Π΅ смоТСт нанСсти Π²Ρ€Π΅Π΄ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠΉ страницС, сайту ΠΈΠ»ΠΈ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Ρƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ.
  • allow-forms — Ρ€Π°Π·Ρ€Π΅ΡˆΠ°Π΅Ρ‚ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΡƒ Π΄Π°Π½Π½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌ.
  • allow-same-origin — ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ информация прСдставлСнная Π² iframe ΠΈΠΌΠ΅Π΅Ρ‚ Ρ‚ΠΎΡ‚ ΠΆΠ΅ источник, Ρ‡Ρ‚ΠΎ ΠΈ информация прСдставлСнная Π² содСрТащСм Π΅Π³ΠΎ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅.
  • allow-scripts — Ρ€Π°Π·Ρ€Π΅ΡˆΠ°Π΅Ρ‚ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ сцСнариСв (ΠΈΡΠΊΠ»ΡŽΡ‡Π°Ρ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ ΠΎΠΊΠ½Π°).
  • allow-top-navigation — Ρ€Π°Π·Ρ€Π΅ΡˆΠ°Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ссылки Π²Π½ΡƒΡ‚Ρ€ΠΈ содСрТимого iframe для пСрСмСщСния ΠΏΠΎ содСрТащСму Π΅Π³ΠΎ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Ρƒ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ sandbox Π½Π΅ поддСрТиваСтся Π² IE9 ΠΈ Π±ΠΎΠ»Π΅Π΅ Ρ€Π°Π½Π½ΠΈΡ… вСрсиях, ΠΈ Π² Opera.

seamless:
Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ содСрТимоС iframe Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ, словно ΠΎΠ½ΠΎ являСтся Ρ‡Π°ΡΡ‚ΡŒΡŽ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° (Π±Π΅Π· Ρ€Π°ΠΌΠΊΠΈ ΠΈ полос ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ). Π’ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ значСния логичСского Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° seamless:

<iframe seamless>
<iframe seamless="">
<iframe seamless="seamless">

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ seamless поддСрТиваСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Chrome ΠΈ Safari6+.

src:
Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ адрСс Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ Π²ΠΎ встроСнном Ρ„Ρ€Π΅ΠΉΠΌΠ΅. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Β»
width:
Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΡˆΠΈΡ€ΠΈΠ½Ρƒ элСмСнта Π² пиксСлях. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Β»

Π’Π΅Π³ <iframe> Ρ‚Π°ΠΊ ΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Π“Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ ΠΈ Бобытия

Π‘Ρ‚ΠΈΠ»ΡŒ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ


iframe:focus {
    outline: none;
}

iframe[seamless] {
    display: block;
}  

ΠŸΡ€ΠΈΠΌΠ΅Ρ€


<iframe src="www.puzzleweb.ru/html/iframe.html">
  Π’Π°Ρˆ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ iframe!
</iframe> 

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° Π² ΠΎΠΊΠ½Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°:

ΠžΡ‚ ΠΊ — Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ внСдрСния — Π˜Π·ΡƒΡ‡Π΅Π½ΠΈΠ΅ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ

К настоящСму ΠΌΠΎΠΌΠ΅Π½Ρ‚Ρƒ Π²Ρ‹ ΡƒΠΆΠ΅Β Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡƒΠΌΠ΅Ρ‚ΡŒ ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»ΡΡ‚ΡŒΒ Π²Π»ΠΎΠΆΠ΅Π½ΠΈΡ Π½Π° свои Π²Π΅Π±-страницы, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ изобраТСния, Π²ΠΈΠ΄Π΅ΠΎ ΠΈ Π°ΡƒΠ΄ΠΈΠΎ. На этом этапС ΠΌΡ‹ Ρ…ΠΎΡ‚Π΅Π»ΠΈ Π±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒΒ ΡˆΠ°Π³ Π² сторону, рассматривая Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ элСмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π²ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ Π² ваши Π²Π΅Π±-страницы самыС Ρ€Π°Π·Π½ΠΎΠΎΠ±Ρ€Π°Π·Π½Ρ‹Π΅ Ρ‚ΠΈΠΏΡ‹ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°: <iframe> (en-US), <embed> ΠΈ <object> (en-US). <iframe>Β ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ для встраивания Π΄Ρ€ΡƒΠ³ΠΈΡ… Π²Π΅Π±-страниц, Π° Π΄Π²Π° Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π²ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ PDF-Ρ„Π°ΠΉΠ»Ρ‹, SVG ΠΈ Π΄Π°ΠΆΠ΅ Flash — ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΡƒΡŽ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΡŽ,Β ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π²Ρ‹ всё Ρ€Π°Π²Π½ΠΎ ΠΈΠ½ΠΎΠ³Π΄Π° ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅.

Π”Π°Π²Π½Ρ‹ΠΌ-Π΄Π°Π²Π½ΠΎ Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ Π±Ρ‹Π»ΠΎ популярно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ„Ρ€Π΅ΠΉΠΌΡ‹ для создания Π²Π΅Π±-сайтов — Π½Π΅Π±ΠΎΠ»ΡŒΡˆΠΈΡ… частСй Π²Π΅Π±-сайта, хранящихся Π½Π° ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… страницах HTML. Они Π±Ρ‹Π»ΠΈ встроСны Π² Π³Π»Π°Π²Π½Ρ‹ΠΉ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚, Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΡ‹ΠΉ Π½Π°Π±ΠΎΡ€ΠΎΠΌ Ρ„Ρ€Π΅ΠΉΠΌΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволял Π²Π°ΠΌ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Π½Π° экранС, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ заполнял ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ„Ρ€Π΅ΠΉΠΌ, Π° Π½Π΅ столбСц и строку Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹. Они Π±Ρ‹Π»ΠΈ популярны Π² сСрСдинС ΠΈ ΠΊΠΎΠ½Ρ†Π΅ 90-Ρ… Π³ΠΎΠ΄ΠΎΠ²Β ΠΈ Π±Ρ‹Π»ΠΈΒ Π΄ΠΎΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒΡΡ‚Π²ΠΎΠΌ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π²Π΅Π±-страницы на Π±ΠΎΠ»Π΅Π΅ ΠΌΠ΅Π»ΠΊΠΈΠ΅ ΠΊΡƒΡΠΊΠΈΒ Π»ΡƒΡ‡ΡˆΠ΅ сказываСтся на скорости Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ, особСнно это Π·Π°ΠΌΠ΅Ρ‚Π½ΠΎ, ΠΊΠΎΠ³Π΄Π° сСтСвыС соСдинСния Π±Ρ‹Π»ΠΈΒ ΠΌΠ΅Π΄Π»Π΅Π½Π½Ρ‹ΠΌΠΈ.

Однако Ρƒ Π½ΠΈΡ… Π±Ρ‹Π»ΠΎ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠ΅Ρ€Π΅Π²Π΅ΡˆΠΈΠ²Π°Π»ΠΈ Π»ΡŽΠ±Ρ‹Π΅ ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΌΠΎΠΌΠ΅Π½Ρ‚Ρ‹, ΠΊΠΎΠ³Π΄Π° ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ сСти ΡΡ‚Π°Π½ΠΎΠ²ΠΈΠ»Π°ΡΡŒΒ Π²Ρ‹ΡˆΠ΅.Β ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ Π²Ρ‹ большС Π½Π΅ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΡ… использовали.

Бпустя Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ врСмя (ΠΊΠΎΠ½Π΅Ρ† 90-Ρ…, Π½Π°Ρ‡Π°Π»ΠΎ 2000-Ρ… Π³ΠΎΠ΄ΠΎΠ²) Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ², Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Java-Π°ΠΏΠΏΠ»Π΅Ρ‚Ρ‹ ΠΈ Flash, стали ΠΎΡ‡Π΅Π½ΡŒ популярными — это ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΠ»ΠΎ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ Π²ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ Π±ΠΎΠ³Π°Ρ‚Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π² Π²Π΅Π±-страницы, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Π²ΠΈΠ΄Π΅ΠΎ ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ просто Π½Π΅ Π±Ρ‹Π»ΠΈ доступны Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Π΅Ρ€Π΅Π· HTML.Β Π’Π½Π΅Π΄Ρ€Π΅Π½ΠΈΠ΅ этих Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ ΠΎΡΡƒΡ‰Π΅ΡΡ‚Π²Π»ΡΠ»ΠΎΡΡŒ посрСдством Ρ‚Π°ΠΊΠΈΡ… элСмСнтов, ΠΊΠ°ΠΊ <object> (en-US) ΠΈ ΠΌΠ΅Π½Π΅Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠ³ΠΎ

<embed>, ΠΈ ΠΎΠ½ΠΈ Π±Ρ‹Π»ΠΈ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ Π² Ρ‚ΠΎ врСмя. Π‘ Ρ‚Π΅Ρ… ΠΏΠΎΡ€ ΠΎΠ½ΠΈ Π²Ρ‹ΡˆΠ»ΠΈΒ ΠΈΠ· ΠΌΠΎΠ΄Ρ‹ ΠΈΠ·-Π·Π° ΠΌΠ½ΠΎΠ³ΠΈΡ… ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Π΄ΠΎΡΡ‚ΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ, Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΡΡ‚ΡŒ, Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ„Π°ΠΉΠ»Π° ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅; Π² наши Π΄Π½ΠΈ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств большС Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ Ρ‚Π°ΠΊΠΈΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹, ΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π½Π° ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π°Ρ… Ρ‚Π°ΠΊΠΆΠ΅ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Π΅Ρ‚ΡΡ.

НаконСц, появился элСмСнт <iframe> (en-US) (наряду с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ способами встраивания ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ <canvas>, <video> ΠΈ Ρ‚. Π΄. ) Он позволяСт Π²ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ Ρ†Π΅Π»Ρ‹ΠΉ Π²Π΅Π±-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ Π²Π½ΡƒΡ‚Ρ€ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Ссли Π±Ρ‹ это Π±Ρ‹Π» <img> ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹ΠΉ элСмСнт, ΠΈ сСгодня ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ повсСмСстно.

Π£Ρ€ΠΎΠΊ истории Π·Π°ΠΊΠΎΠ½Ρ‡Π΅Π½, Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒΡΡ дальшС ΠΈ посмотрим, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ· Π½ΠΈΡ….

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ собираСмся ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ прямо Π² Ρ€Π°Π·Π΄Π΅Π» Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ обучСния, Ρ‡Ρ‚ΠΎΠ±Ρ‹ сразу Π΄Π°Ρ‚ΡŒ Π²Π°ΠΌ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠ΅ прСдставлСниС ΠΎ Ρ‚ΠΎΠΌ, для Ρ‡Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡΒ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ внСдрСния. ΠΠ°ΠΌΒ ΠΎΡ‡Π΅Π½ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Π·Π½Π°ΠΊΠΎΠΌΒ Youtube, Π½ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π½Π΅ Π·Π½Π°ΡŽΡ‚ ΠΎ нСкоторых доступных для нСго срСдствах совмСстного доступа. Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим, ΠΊΠ°ΠΊ Youtube позволяСт Π½Π°ΠΌ Π²ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ Π²ΠΈΠ΄Π΅ΠΎ Π½Π° Π»ΡŽΠ±ΡƒΡŽ страницу, которая Π½Π°ΠΌ нравится, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ <iframe> (en-US).

  1. Π‘Π½Π°Ρ‡Π°Π»Π° ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π½Π° Youtube ΠΈ Π½Π°ΠΉΠ΄ΠΈΡ‚Π΅ ΠΏΠΎΠ½Ρ€Π°Π²ΠΈΠ²ΡˆΠ΅Π΅ΡΡ Π²Π°ΠΌ Π²ΠΈΠ΄Π΅ΠΎ.
  2. Под Π²ΠΈΠ΄Π΅ΠΎ Π²Ρ‹ Π½Π°ΠΉΠ΄Ρ‘Ρ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡΒ» — Π½Π°ΠΆΠΌΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ совмСстного доступа.
  3. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«Π’ΡΡ‚Π°Π²ΠΈΡ‚ΡŒΒ», ΠΈ Π²Π°ΠΌ Π±ΡƒΠ΄Π΅Ρ‚ прСдоставлСн ΠΊΠΎΠ΄ <iframe> — скопируйтС Π΅Π³ΠΎ.
  4. Π’ΡΡ‚Π°Π²ΡŒΡ‚Π΅ Π΅Π³ΠΎ Π² ΠΏΠΎΠ»Π΅ Π²Π²ΠΎΠ΄Π° Π½ΠΈΠΆΠ΅ ΠΈ посмотритС Π½Π°Β Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π² Output.

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΒ Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ Π²Π½Π΅Π΄Ρ€ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚Ρƒ GoogleΒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

  1. ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π² ΠšΠ°Ρ€Ρ‚Ρ‹ Google ΠΈ Π½Π°ΠΉΠ΄ΠΈΡ‚Π΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΡΡ‰ΡƒΡŽ Π²Π°ΠΌ ΠΊΠ°Ρ€Ρ‚Ρƒ.
  2. НаТмитС «МСню» (Ρ‚Ρ€ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ Π»ΠΈΠ½ΠΈΠΈ) Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ ΡƒΠ³Π»Ρƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса.
  3. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ Бсылка/ΠΊΠΎΠ΄.
  4. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ ВстраиваниС ΠΊΠ°Ρ€Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ даст Π²Π°ΠΌ ΠΊΠΎΠ΄ <iframe> — скопируйтС Π΅Π³ΠΎ.
  5. Π’ΡΡ‚Π°Π²ΡŒΡ‚Π΅ Π΅Π³ΠΎ Π² ΠΏΠΎΠ»Π΅ Π²Π²ΠΎΠ΄Π° Π½ΠΈΠΆΠ΅ ΠΈ посмотритС Π½Π°Β Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π² Output.

Если Π²Ρ‹ допустили ΠΎΡˆΠΈΠ±ΠΊΡƒ, Π²Ρ‹ всСгда ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ±Ρ€ΠΎΡΠΈΡ‚ΡŒ Π΅Ρ‘ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠ½ΠΎΠΏΠΊΠΈ «Бброс». Если Π²Ρ‹ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ застряли, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«ΠŸΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅Β», Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΎΡ‚Π²Π΅Ρ‚.

Π˜Ρ‚Π°ΠΊ, это Π±Ρ‹Π»ΠΎ Π»Π΅Π³ΠΊΠΎ ΠΈ вСсСло, Π½Π΅ Ρ‚Π°ΠΊ Π»ΠΈ? Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ <iframe> (en-US) ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Ρ‹ для размСщСния Π΄Ρ€ΡƒΠ³ΠΈΡ… Π²Π΅Π±-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ² Π² Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΌ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅. Π­Ρ‚ΠΎ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ стороннСго ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π½Π° ваш сайт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ прямого контроля ΠΈ Π½Π΅ Ρ…ΠΎΡ‡Π΅Ρ‚ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Ρ‹Π²Π°Ρ‚ΡŒ Π²Π°ΡˆΡƒ ΡΠΎΠ±ΡΡ‚Π²Π΅Π½Π½ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ — Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π²ΠΈΠ΄Π΅ΠΎ ΠΎΡ‚ поставщиков ΠΎΠ½Π»Π°ΠΉΠ½-Π²ΠΈΠ΄Π΅ΠΎ, систСмы ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠ΅Π², Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Disqus, ΠΊΠ°Ρ€Ρ‚Ρ‹ ΠΎΡ‚ поставщиков ΠΎΠ½Π»Π°ΠΉΠ½-ΠΊΠ°Ρ€Ρ‚, Ρ€Π΅ΠΊΠ»Π°ΠΌΠ½Ρ‹Ρ… Π±Π°Π½Π½Π΅Ρ€ΠΎΠ² ΠΈ Ρ‚. Π΄. Π–ΠΈΠ²Ρ‹Π΅ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΡƒΠ΅ΠΌΡ‹Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ использовали Π² этом курсС, Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Ρ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ <iframe>.

Π•ΡΡ‚ΡŒ нСсколько ΡΠ΅Ρ€ΡŒΡ‘Π·Π½Ρ‹Ρ… ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΒ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΡΡ‚ΠΈ ΠΏΡ€ΠΈ использовании <iframe>, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ мы обсудим Π½ΠΈΠΆΠ΅, Π½ΠΎ это Π½Π΅ Π·Π½Π°Ρ‡ΠΈΡ‚, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… Π½Π° своих сайтах — они просто Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ…Β Π·Π½Π°Π½ΠΈΠΉΒ ΠΈ Ρ‚Ρ‰Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎΒ ΠΎΠ±Π΄ΡƒΠΌΡ‹Π²Π°Π½ΠΈΡ. Π”Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим ΠΊΠΎΠ΄ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅. Π‘ΠΊΠ°ΠΆΠ΅ΠΌ, Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅Β Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ глоссарий MDN Π½Π° ΠΎΠ΄Π½Ρƒ ΠΈΠ· своих Π²Π΅Π±-страниц.Β Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π²Ρ€ΠΎΠ΄Π΅ этого:

<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
        frameborder="0"
        allowfullscreen sandbox>
  <p> <a href="https://developer.mozilla.org/en-US/docs/Glossary">
    Fallback link for browsers that don't support iframes
  </a> </p>
</iframe>

Π­Ρ‚ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ основы, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ для использования <iframe>:

allowfullscreen (en-US)
Если установлСно, <iframe> ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠΌΠ΅Ρ‰Ρ‘Π½ Π² полноэкранный Ρ€Π΅ΠΆΠΈΠΌ с использованиСм полноэкранного API (Ρ‡Ρ‚ΠΎ нСсколько Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΡ‚ Π·Π° Ρ€Π°ΠΌΠΊΠΈ этой ΡΡ‚Π°Ρ‚ΡŒΠΈ).
frameborder (en-US)
Если установлСно Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 1, это ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ Π½Π°Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ Π³Ρ€Π°Π½ΠΈΡ†Ρƒ ΠΌΠ΅ΠΆΠ΄Ρƒ этим Ρ„Ρ€Π΅ΠΉΠΌΠΎΠΌ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ Ρ„Ρ€Π΅ΠΉΠΌΠ°ΠΌΠΈ, Ρ‡Ρ‚ΠΎ являСтся ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ. 0 удаляСт Π³Ρ€Π°Π½ΠΈΡ†Ρƒ. ИспользованиС этого Π½Π° самом Π΄Π΅Π»Π΅ Π½Π΅ рСкомСндуСтся, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Ρ‚ΠΎΡ‚ ΠΆΠ΅ эффСкт ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ border: none; Π² CSS.
src (en-US)
Π­Ρ‚ΠΎΡ‚ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚, ΠΊΠ°ΠΊ ΠΈ <video> / <img>, содСрТит ΠΏΡƒΡ‚ΡŒ, ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ Π½Π° URL-адрСс внСдряСмого Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°.
width (en-US) and height (en-US)
Π­Ρ‚ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ высоту, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ…Β Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ iframe.
Π Π΅Π·Π΅Ρ€Π²Π½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚
Π’ΠΎΡ‡Π½ΠΎ Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Π΅ элСмСнты, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ <video>, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Ρ€Π΅Π·Π΅Ρ€Π²Π½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ‚Π΅Π³Π°ΠΌΠΈ открытия ΠΈ закрытия <iframe> </ iframe>, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ появятся, Ссли Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ < IFRAME>. Π’ этом случаС ΠΌΡ‹ Π²ΠΊΠ»ΡŽΡ‡ΠΈΠ»ΠΈ ссылку Π½Π° страницу. Вряд Π»ΠΈ Π²Ρ‹ ΡΡ‚ΠΎΠ»ΠΊΠ½Ρ‘Ρ‚Π΅ΡΡŒ с Ρ‚Π°ΠΊΠΈΠΌΒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ <iframe> Π² нашС врСмя.
sandbox (en-US)
Π­Ρ‚ΠΎΡ‚ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π²Β Π±ΠΎΠ»Π΅Π΅ соврСмСнных Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…, Ρ‡Π΅ΠΌ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ <iframe> (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, IE 10 ΠΈ Π²Ρ‹ΡˆΠ΅). ΠžΠ½Β Π·Π°ΠΏΡ€Π°ΡˆΠΈΠ²Π°Π΅Ρ‚ ΠΏΠΎΠ²Ρ‹ΡˆΠ΅Π½Π½Ρ‹Π΅ настройки бСзопасности. Об этом ΠΌΡ‹ расскаТСм Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ Ρ€Π°Π·Π΄Π΅Π»Π΅.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅:Β Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ²Ρ‹ΡΠΈΡ‚ΡŒ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ, рСкомСндуСтся ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ src Π² элСмСнтС iframe с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ JavaScript послС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ основноС содСрТимоС Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½ΠΎ. Π­Ρ‚ΠΎ ΡƒΡΠΊΠΎΡ€ΠΈΡ‚Β Π²Π°ΡˆΡƒΒ ΡΡ‚Ρ€Π°Π½ΠΈΡ†ΡƒΒ ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ врСмя Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΎΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΉ страницы (Π²Π°ΠΆΠ½Ρ‹ΠΉ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ SEO.)

ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ бСзопасности

Π’Ρ‹ΡˆΠ΅ ΠΌΡ‹ упомянули ΠΎ проблСмах бСзопасности. Π”Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим это Ρ‡ΡƒΡ‚ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅. ΠœΡ‹ Π½Π΅ ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ всё ΠΏΠΎΠΉΠΌΡ‘Ρ‚Π΅ с пСрвого раза.Β ΠœΡ‹ просто Ρ…ΠΎΡ‚ΠΈΠΌ ΡΠΎΠΎΠ±Ρ‰ΠΈΡ‚ΡŒ Π²Π°ΠΌ ΠΎ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ΅ ΠΈ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ссылку, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒΡΡ ΠΊ Π½Π΅ΠΉ, ΠΊΠΎΠ³Π΄Π° станСтС болСС ΠΎΠΏΡ‹Ρ‚Π½Ρ‹ΠΌΠΈ ΠΈ Π½Π°Ρ‡Π½Ρ‘Ρ‚Π΅Β Ρ€Π°ΡΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ использованиС iframe Π² своих экспСримСнтах ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π½Π΅Ρ‚ нСобходимости Π±ΠΎΡΡ‚ΡŒΡΡ ΠΈ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ <iframe>Β — Π²Π°ΠΌ просто Π½ΡƒΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ остороТным. ΠŸΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΠΌ…

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² ΠΈ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ Π½Π° Π³ΠΎΡ€ΡŒΠΊΠΎΠΌ ΠΎΠΏΡ‹Ρ‚Π΅ усвоили, Ρ‡Ρ‚ΠΎ iframe — частая Ρ†Π΅Π»ΡŒΒ (ΠΎΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ‚Π΅Ρ€ΠΌΠΈΠ½: Π²Π΅ΠΊΡ‚ΠΎΡ€ Π°Ρ‚Π°ΠΊΠΈ) ΠΏΠ»ΠΎΡ…ΠΈΡ… людСй Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ (часто Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΡ‹Ρ… Ρ…Π°ΠΊΠ΅Ρ€Π°ΠΌΠΈ, ΠΈΠ»ΠΈ, Π±ΠΎΠ»Π΅Π΅ Ρ‚ΠΎΡ‡Π½ΠΎ, ΠΊΡ€Π΅ΠΊΠ΅Ρ€Π°ΠΌΠΈ) для Π°Ρ‚Π°ΠΊΠΈ ΠΏΡ€ΠΈ ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΠ΅ Π·Π»ΠΎΠ½Π°ΠΌΠ΅Ρ€Π΅Π½Π½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ваши Π²Π΅Π±-страницы ΠΈΠ»ΠΈ ΠΎΠ±ΠΌΠ°Π½ΠΎΠΌ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ посСтитСлСй Π΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚ΠΎ, Ρ‡Π΅Π³ΠΎ ΠΎΠ½ΠΈ Π½Π΅ хотят, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ρ€Π°ΡΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΊΠΎΠ½Ρ„ΠΈΠ΄Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ Π²Ρ€ΠΎΠ΄Π΅ ΠΈΠΌΠ΅Π½ΠΈΒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΈ ΠΏΠ°Ρ€ΠΎΠ»ΠΈ. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ этого, Π°Π²Ρ‚ΠΎΡ€Ρ‹ спСцификаций ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌΡ‹ бСзопасности для обСспСчСния Π·Π°Ρ‰ΠΈΡ‚Ρ‹ <iframe>, Π»ΡƒΡ‡ΡˆΠΈΠ΅ ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… мы рассмотрим Π½ΠΈΠΆΠ΅.

Clickjacking – это ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²ΠΈΠ΄ΠΎΠ² ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΉ Π°Ρ‚Π°ΠΊΠΈ iframe, ΠΊΠΎΠ³Π΄Π° Ρ…Π°ΠΊΠ΅Ρ€Ρ‹ Π²Π½Π΅Π΄Ρ€ΡΡŽΡ‚ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΉ iframe Π² ваш Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ (ΠΈΠ»ΠΈ Π²Π½Π΅Π΄Ρ€ΡΡŽΡ‚ ваш Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ Π½Π° свой собствСнный врСдоносный Π²Π΅Π±-сайт) ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Π΅Π³ΠΎ для Π·Π°Ρ…Π²Π°Ρ‚Π° взаимодСйствия ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ. Π­Ρ‚ΠΎ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ способ ввСсти ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Π² Π·Π°Π±Π»ΡƒΠΆΠ΄Π΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΡƒΠΊΡ€Π°ΡΡ‚ΡŒ ΠΊΠΎΠ½Ρ„ΠΈΠ΄Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅.

Быстрый ΠΏΡ€ΠΈΠΌΠ΅Ρ€Β — ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΡ‹ ΠΏΠΎΠΊΠ°Π·Π°Π»ΠΈ Π²Ρ‹ΡˆΠ΅, Π² ваш Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ (Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΉΡ‚ΠΈ Π΅Π³ΠΎ ΠΆΠΈΠ²ΠΎΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Β Π½Π° Github (см. Π’Π°ΠΊΠΆΠ΅ исходный ΠΊΠΎΠ΄). На самом Π΄Π΅Π»Π΅, Π²Ρ‹ Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ Π½Π° страницС,Β Ρ‚.ΠΊ. Ссли Π²Ρ‹ посмотритС в консоль Π² инструмСнтах Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ сообщСниС, ΠΎΠ±ΡŠΡΡΠ½ΡΡŽΡ‰Π΅Π΅ Π²Π°ΠΌ, ΠΏΠΎΡ‡Π΅ΠΌΡƒ. Π’ Firefox Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ сообщСниС Β«ΠžΡ‚ΠΊΠ°Π·Π°Π½ΠΎ Π² доступС» Π² связи с X-Frame-Options:Β https://developer.mozilla.org/en-US/docs/GlossaryΒ Π½Π΅ Ρ€Π°Π·Ρ€Π΅ΡˆΠ°Π΅Ρ‚ ΠΊΠ°Π΄Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅. Π­Ρ‚ΠΎ связано с Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ построили MDN, Π²ΠΊΠ»ΡŽΡ‡ΠΈΠ»ΠΈ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ Π½Π° сСрвСрС, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ обслуТиваСт страницы Π²Π΅Π±-сайта, запрСщая им Π²Π½Π΅Π΄Ρ€ΡΡ‚ΡŒΡΡ Π²Π½ΡƒΡ‚Ρ€ΠΈ <iframe>Β (см. Настройка дирСктивы CSP Π½ΠΈΠΆΠ΅). Π‘ΡƒΡ‚ΡŒ здСсь Ρ‚Π°ΠΊΠΎΠ²Π° — цСлой страницС MDN Π½Π° самом Π΄Π΅Π»Π΅ нСт смысла Π²ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒΡΡ Π² Π΄Ρ€ΡƒΠ³ΠΈΠ΅ страницы —Β ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ, Ссли Π²Ρ‹ Π½Π΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π²Ρ€ΠΎΠ΄Π΅ встраивания ΠΈΡ… Π½Π° свой сайт ΠΈ Π²Ρ‹ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ ΠΈΡ…Β ΠΊΠ°ΠΊ свои собствСнныС; ΠΈΠ»ΠΈ ΠΏΡ‹Ρ‚Π°Ρ‚ΡŒΡΡ ΡƒΠΊΡ€Π°ΡΡ‚ΡŒ Π΄Π°Π½Π½Ρ‹Π΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ clickjacking, Ρ‡Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠ»ΠΎΡ…ΠΎ. Плюс, Ссли всС Π½Π°Ρ‡Π½ΡƒΡ‚ это Π΄Π΅Π»Π°Ρ‚ΡŒ, вся Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ пропускная ΡΠΏΠΎΡΠΎΠ±Π½ΠΎΡΡ‚ΡŒ Π½Π°Ρ‡Π½Ρ‘Ρ‚ ΡΡ‚ΠΎΠΈΡ‚ΡŒ Mozilla Π±ΠΎΠ»ΡŒΡˆΠΈΡ…Β Π΄Π΅Π½Π΅Π³.

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€ΠΈ нСобходимости

Иногда ΠΈΠΌΠ΅Π΅Ρ‚ смысл Π²ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ сторонний ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ — Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π²ΠΈΠ΄Π΅ΠΎ ΠΈ ΠΊΠ°Ρ€Ρ‚Ρ‹, Π½ΠΎ Π²Ρ‹ ΠΈΠ·Π±Π΅ΠΆΠΈΡ‚Π΅ Π³ΠΎΠ»ΠΎΠ²Π½ΠΎΠΉΒ Π±ΠΎΠ»ΠΈ, Ссли Π±ΡƒΠ΄Π΅Ρ‚Π΅ Π²ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒΒ ΡΡ‚ΠΎΡ€ΠΎΠ½Π½ΠΈΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚ΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° это Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ. Π₯ΠΎΡ€ΠΎΡˆΠ΅Π΅ эмпиричСскоС ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ для Π²Π΅Π±-бСзопасности: Β«Π’Ρ‹ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π±Ρ‹Ρ‚ΡŒ слишком остороТным. Если Π²Ρ‹ Ρ‡Ρ‚ΠΎ-то сдСлали, Π΄Π²Π°ΠΆΠ΄Ρ‹ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅ это. Если ΠΊΡ‚ΠΎ-Ρ‚ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠΉ сдСлал это, считайтС, Ρ‡Ρ‚ΠΎ это опасно, ΠΏΠΎΠΊΠ° Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π΄ΠΎΠΊΠ°Π·Π°Π½ΠΎ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠ΅Β».

Помимо бСзопасности, Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π·Π½Π°Ρ‚ΡŒ ΠΎΠ± ΠΈΠ½Ρ‚Π΅Π»Π»Π΅ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ собствСнности. Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° находится ΠΏΠΎΠ΄ Π·Π°Ρ‰ΠΈΡ‚ΠΎΠΉ авторских ΠΏΡ€Π°Π², Π΄Π°ΠΆΠ΅ Ρ‚ΠΎΡ‚, ΠΎΡ‚ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π²Ρ‹ Π½Π΅ ΠΌΠΎΠ³Π»ΠΈ ΠΎΠΆΠΈΠ΄Π°Ρ‚ΡŒ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ Π½Π° Wikimedia Commons). Никогда Π½Π΅ Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚Π΅ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π½Π° свою страницу, Ссли ΠΎΠ½ Π²Π°ΠΌ Π½Π΅ ΠΏΡ€ΠΈΠ½Π°Π΄Π»Π΅ΠΆΠΈΡ‚ ΠΈΠ»ΠΈ Ссли Π½Π΅Ρ‚Β ΠΎΠ΄Π½ΠΎΠ·Π½Π°Ρ‡Π½ΠΎΠ³ΠΎ письмСнного Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΎΡ‚ правообладатСля. Наказания Π·Π° Π½Π°Ρ€ΡƒΡˆΠ΅Π½ΠΈΡ авторских ΠΏΡ€Π°Π² строги. И, повторимся, Π²Ρ‹ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π±Ρ‹Ρ‚ΡŒ слишком остороТными.

Если ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π»ΠΈΡ†Π΅Π½Π·ΠΈΡ€ΠΎΠ²Π°Π½, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠΎΠ±Π»ΡŽΠ΄Π°Ρ‚ΡŒ условия Π»ΠΈΡ†Π΅Π½Π·ΠΈΠΈ. НапримСр, ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π½Π° MDN Π»ΠΈΡ†Π΅Π½Π·ΠΈΡ€ΠΎΠ²Π°Π½ Π½Π° licensed under CC-BY-SA. Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚ΡŒΡΡ ΠΊ Π½Π°ΠΌ с ΡƒΠ²Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, ΠΊΠΎΠ³Π΄Π° Ρ†ΠΈΡ‚ΠΈΡ€ΡƒΠ΅Ρ‚Π΅ наш ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, Π΄Π°ΠΆΠ΅ Ссли внСсли Π² Π½Π΅Π³ΠΎ сущСствСнныС измСнСния.

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ HTTPS

HTTPS это Π·Π°ΡˆΠΈΡ„Ρ€ΠΎΠ²Π°Π½Π½Π°Ρ вСрсия HTTP. Π’Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΎΠ±ΡΠ»ΡƒΠΆΠΈΠ²Π°Ρ‚ΡŒ свои Π²Π΅Π±-сайты, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ HTTPS, всСгда, ΠΊΠΎΠ³Π΄Π° это Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ :

  1. HTTPS ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Π΅Ρ‚ Π²Π΅Ρ€ΠΎΡΡ‚Π½ΠΎΡΡ‚ΡŒ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π±Ρ‹Π» ΠΈΠ·ΠΌΠ΅Π½Ρ‘Π½ ΠΏΠΎ ΠΏΡƒΡ‚ΠΈ;
  2. HTTPS Π·Π°ΠΏΡ€Π΅Ρ‰Π°Π΅Ρ‚ доступ Π²Π½Π΅Π΄Ρ€Ρ‘Π½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΊ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Ρƒ Π² вашСм исходном Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅ ΠΈ Π½Π°ΠΎΠ±ΠΎΡ€ΠΎΡ‚.

ИспользованиС HTTPS Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ сСртификат бСзопасности, Ρ‡Ρ‚ΠΎΒ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π² ΠΊΠΎΠΏΠ΅Π΅Ρ‡ΠΊΡƒ (хотя Π΅ΡΡ‚ΡŒ Let’s Encrypt, Ρ‡Ρ‚ΠΎ ΠΎΠ±Π»Π΅Π³Ρ‡Π°Π΅Ρ‚ Π·Π°Π΄Π°Ρ‡Ρƒ). Если Π²Ρ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΅Π³ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΡ‚Π΄Π°Π²Π°Ρ‚ΡŒ свой Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTTP. Однако, ΠΈΠ·-Π·Π° Π²Ρ‚ΠΎΡ€ΠΎΠ³ΠΎ прСимущСства HTTPSΒ Π²ΠΎ Ρ‡Ρ‚ΠΎ Π±Ρ‹ Ρ‚ΠΎ Π½ΠΈ стало вы Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π²Π½Π΅Π΄Ρ€ΡΡ‚ΡŒ сторонний ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ с HTTP. (Π’ Π»ΡƒΡ‡ΡˆΠ΅ΠΌ случаС ваш Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ выдаст ΡƒΠ³Ρ€ΠΎΠΆΠ°ΡŽΡ‰Π΅Π΅ ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠ΅.) ВсС ΡƒΠ²Π°ΠΆΠ°Π΅ΠΌΡ‹Π΅ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄Π΅Π»Π°ΡŽΡ‚ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ доступным для внСдрСния Ρ‡Π΅Ρ€Π΅Π· <iframe>, доступны Ρ‡Π΅Ρ€Π΅Π· HTTPS — посмотритС URL-адрСса Π²Π½ΡƒΡ‚Ρ€ΠΈ <iframe> src ΠΏΡ€ΠΈ встраивании, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, содСрТимого ΠΈΠ· ΠšΠ°Ρ€Ρ‚ Google ΠΈΠ»ΠΈ Youtube.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Github pages ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Ρ‡Π΅Ρ€Π΅Π· HTTPS ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, поэтому это ΠΏΠΎΠ»Π΅Π·Π½ΠΎ для размСщСния ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°. Если Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Π΄Ρ€ΡƒΠ³ΠΎΠΉ хостинг ΠΈ Π½Π΅ ΡƒΠ²Π΅Ρ€Π΅Π½Ρ‹, спроситС хостинг-ΠΏΡ€ΠΎΠ²Π°ΠΉΠ΄Π΅Ρ€Π° ΠΎΠ± этом.

ВсСгда ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚
sandbox

Π’Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π΄Π°Ρ‚ΡŒ Ρ…Π°ΠΊΠ΅Ρ€Π°ΠΌ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ мСньшС возмоТностСй, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΠ»ΠΎΡ…ΠΈΠ΅ Π²Π΅Ρ‰ΠΈ Π½Π° вашСм Π²Π΅Π±-сайтС, поэтому Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡ‚ΡŒ ΠΊΠΎΠΏΠΈΠΏΠ°ΡΡ‚ΠΈΡ‚ΡŒ встроСнный ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Ρ… для выполнСния этого дСйствия. ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, это относится ΠΈ ΠΊ Π²Π°ΡˆΠ΅ΠΌΡƒ собствСнному ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Ρƒ. ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ для ΠΊΠΎΠ΄Π°, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π½Π°Π΄Π»Π΅ΠΆΠ°Ρ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌΒ ΠΈΠ»ΠΈ для тСстирования, Π½ΠΎ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ нанСсти Π²Ρ€Π΅Π΄ ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΉ части ΠΊΠΎΠ΄ΠΎΠ²ΠΎΠΉ Π±Π°Π·Ρ‹ (случайной ΠΈΠ»ΠΈ Π·Π»ΠΎΠ½Π°ΠΌΠ΅Ρ€Π΅Π½Π½ΠΎΠΉ), называСтся sandbox.

ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚, Π½Π΅ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹ΠΉ sandbox, ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ слишком ΠΌΠ½ΠΎΠ³ΠΎΠ΅ (Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ JavaScript, ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠ° Ρ„ΠΎΡ€ΠΌ, Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ ΠΎΠΊΠ½Π° ΠΈ Ρ‚. Π΄.). По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π²ΠΊΠ»ΡŽΡ‡Π°ΠΉΡ‚Π΅ всС Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ ограничСния, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ sandbox Π±Π΅Π· ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ², ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅.

Если это Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΎΠ΄ΠΈΠ½ Π·Π° Π΄Ρ€ΡƒΠ³ΠΈΠΌ (Π²Π½ΡƒΡ‚Ρ€ΠΈ значСния Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°Β sandbox="") β€” смотри sandbox (en-US) ссылка для всСх доступных ΠΎΠΏΡ†ΠΈΠΉ. Π’Π°ΠΆΠ½ΠΎ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ allow-scripts ΠΈ allow-same-origin Π² свой sandbox Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ β€” Π² Ρ‚Π°ΠΊΠΎΠΌ случаС, встроСнный ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΠΈΡ‚ΠΈΠΊΡƒ бСзопасности, которая Π·Π°ΠΏΡ€Π΅Ρ‰Π°Π΅Ρ‚ сайтам Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ скрипты и ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ JavaScript для ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ «ΠΏΠ΅ΡΠΎΡ‡Π½ΠΈΡ†Ρ‹» sandbox .

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅. «ΠŸΠ΅ΡΠΎΡ‡Π½ΠΈΡ†Π°» Π½Π΅ обСспСчиваСт Π·Π°Ρ‰ΠΈΡ‚Ρƒ, Ссли Π·Π»ΠΎΡƒΠΌΡ‹ΡˆΠ»Π΅Π½Π½ΠΈΠΊΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΠ±ΠΌΠ°Π½Ρ‹Π²Π°Ρ‚ΡŒ людСй Ρ‡Π΅Ρ€Π΅Π· прямоС посСщСниС врСдоносного ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° (Π²Π½Π΅ iframe). Если Π΅ΡΡ‚ΡŒ Π²Π΅Ρ€ΠΎΡΡ‚Π½ΠΎΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ врСдоносным (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, созданный ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌΠΈ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚), поТалуйста, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π΅Π³ΠΎ ΠΈΠ· Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ domain Π½Π° ваш основной сайт.

Настройка Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΈΠ² CSP

CSP ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ ΠΏΠΎΠ»ΠΈΡ‚ΠΈΠΊΡƒ бСзопасности ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΈ обСспСчиваСт Π½Π°Π±ΠΎΡ€ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² HTTP (ΠΌΠ΅Ρ‚Π°Π΄Π°Π½Π½Ρ‹Π΅, ΠΎΡ‚ΠΏΡ€Π°Π²Π»Π΅Π½Π½Ρ‹Π΅ вмСстС с вашими Π²Π΅Π±-страницами, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ ΠΎΠ±ΡΠ»ΡƒΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ с Π²Π΅Π±-сСрвСра), ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π½Ρ‹Ρ… для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ бСзопасности вашСго HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. Когда Π΄Π΅Π»ΠΎ Π΄ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ Π΄ΠΎ обСспСчСния бСзопасности <iframe>, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ сСрвСр для ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π³ΠΎ X-Frame-OptionsΒ  Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΌΠ΅ΡˆΠ°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠΌ Π²Π΅Π±-сайтам Π²ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ ваш ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π½Π° ΠΈΡ… Π²Π΅Π±-страницы (Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΠ»ΠΎ Π±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ clickjacking ΠΈ мноТСство Π΄Ρ€ΡƒΠ³ΠΈΡ… Π°Ρ‚Π°ΠΊ), Ρ‡Ρ‚ΠΎ ΠΈ Π±Ρ‹Π»ΠΎ сдСлано Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌΠΈ MDN, ΠΊΠ°ΠΊ ΠΌΡ‹ Π²ΠΈΠ΄Π΅Π»ΠΈ Ρ€Π°Π½Π΅Π΅..

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ пост Π€Ρ€Π΅Π΄Π΅Ρ€ΠΈΠΊΠ° Π‘Ρ€Π°ΡƒΠ½Π° On the X-Frame-Options Security Header для Π±ΠΎΠ»Π΅Π΅ Π΄Π΅Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΏΠΎ Ρ‚Π΅ΠΌΠ΅. РазумССтся, объяснСниС Π² этой ΡΡ‚Π°Ρ‚ΡŒΠ΅Β Π΄Π°Π»Π΅ΠΊΠΎ Π½Π΅ ΠΏΠΎΠ»Π½ΠΎΠ΅.

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ <embed> ΠΈ <object> (en-US)Β  слуТат Π΄Ρ€ΡƒΠ³ΠΎΠΉ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ iframe — эти элСмСнты ΡΠ²Π»ΡΡŽΡ‚ΡΡ инструмСнтами ΠΎΠ±Ρ‰Π΅Π³ΠΎ назначСния для встраивания Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Ρ‚ΠΈΠΏΠΎΠ² внСшнСго ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ²Ρ‹Π΅ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Java Applets ΠΈ Flash, PDF (ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ с ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠΌ PDF) ΠΈ Π΄Π°ΠΆΠ΅ Ρ‚Π°ΠΊΠΎΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚,Β ΠΊΠ°ΠΊ Π²ΠΈΠ΄Π΅ΠΎ, SVG ΠΈ изобраТСния!

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅. Плагин — это ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ΅ обСспСчСниС, ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°ΡŽΡ‰Π΅Π΅ доступ ΠΊ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Ρƒ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Ρ‡ΠΈΡ‚Π°Ρ‚ΡŒ ΠΈΠ·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ.

Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, Π²Ρ‹ вряд Π»ΠΈ Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ эти элСмСнты ΠΎΡ‡Π΅Π½ΡŒ часто. АпплСты Π½Π΅ использовались Π³ΠΎΠ΄Π°ΠΌΠΈ, Flash Π² настоящСС врСмя нС ΠΎΡ‡Π΅Π½ΡŒ популярСн ΠΈΠ·-Π·Π° ряда ΠΏΡ€ΠΈΡ‡ΠΈΠ½ (см. Π‘Π»ΡƒΡ‡Π°ΠΉ с ΠΏΠ»Π°Π³ΠΈΠ½Π°ΠΌΠΈ, Π½ΠΈΠΆΠ΅), PDF-Ρ„Π°ΠΉΠ»Ρ‹, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, Π»ΡƒΡ‡ΡˆΠ΅ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ ΠΏΠΎ ссылкС, Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ — Ρ‚Π°ΠΊΠΎΠΉ, ΠΊΠ°ΠΊ изобраТСния ΠΈ Π²ΠΈΠ΄Π΅ΠΎ, ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒΡΡ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΡ‰Π΅. ΠŸΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΈ эти ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ внСдрСния Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠΈΠΌΠΈ тСхнологиями, ΠΈ ΠΌΡ‹Β ΡƒΠΏΠΎΠΌΠΈΠ½Π°Π΅ΠΌ ΠΈΡ… здСсь Π½Π° случай, Ссли Π²Ρ‹ ΡΡ‚ΠΎΠ»ΠΊΠ½Ρ‘Ρ‚Π΅ΡΡŒ с Π½ΠΈΠΌΠΈ Π² ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½Ρ‹Ρ… ΠΎΠ±ΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΡΡ‚Π²Π°Ρ…, Ρ‚Π°ΠΊΠΈΡ… как интрасСти ΠΈΠ»ΠΈ ΠΊΠΎΡ€ΠΏΠΎΡ€Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹.

Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π²Π½Π΅Π΄Ρ€ΠΈΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΏΠ»Π°Π³ΠΈΠ½Π°, Π½ΠΈΠΆΠ΅ ΠΈΡΡ‡Π΅Ρ€ΠΏΡ‹Π²Π°ΡŽΡ‰Π°Ρ информация, которая Π²Π°ΠΌ понадобится:

<embed><object> (en-US)
URL встраиваСмого ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°srcdata (en-US)
Ρ‚ΠΎΡ‡Π½Ρ‹ΠΉΒ media type встраиваСмого ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°typetype (en-US)
высота ΠΈ ΡˆΠΈΡ€ΠΈΠ½Π° (Π² пиксСлях) элСмСнта, управляСмого ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠΌheight
width
height (en-US)
width (en-US)
ΠΈΠΌΠ΅Π½Π° ΠΈ значСния, прСдоставляСмыС ΠΏΠ»Π°Π³ΠΈΠ½Ρƒ Π² качСствС ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ²ΠžΡΠΎΠ±Ρ‹Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹,с ΠΈΡ… ΠΈΠΌΠ΅Π½Π°ΠΌΠΈ ΠΈ значСниямиодиночныС элСмСнты <param> (en-US), находящиСся Π²Π½ΡƒΡ‚Ρ€ΠΈΒ <object>
нСзависимый HTML-ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π² качСствС Ρ€Π΅Π·Π΅Ρ€Π²Π° для ΠΎΡ‚ΡΡƒΡ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π³ΠΎ рСсурсанС поддСрТиваСтся (<noembed> являСтся ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠΈΠΌ)содСрТится Π²Π½ΡƒΡ‚Ρ€ΠΈΒ <object>, послС элСмСнтов <param>Β 

Π—Π°ΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: <object>Β -Ρƒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Β dataΒ , Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Β typeΒ , ΠΈΠ»ΠΈ оба сразу. Если Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ ΠΈΡ… вмСстС, Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ typemustmatch (en-US)Β (ΠΈΠΌΠ΅ΡŽΡ‰ΠΈΠΉΡΡ Π² Π½Π°Π»ΠΈΡ‡ΠΈΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Firefox, Π½Π° ΠΌΠΎΠΌΠ΅Π½Ρ‚ написания Π΄Π°Π½Π½ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠΈ). Атрибут typemustmatch ΠΏΡ€Π΅Π΄ΠΎΡ‚Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ запуск Ρ„Π°ΠΉΠ»Π°, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ссли Π² Π² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ type Π½Π΅ записан ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ ΠΌΠ΅Π΄ΠΈΠ°-Ρ‚ΠΈΠΏ. Π‘Π»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Β typemustmatch ΠΌΠΎΠΆΠ΅Ρ‚Β ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ прСимущСства Π² бСзопасности в случаС встраивания ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΈΠ· Π΄Ρ€ΡƒΠ³ΠΈΡ… источников origin (Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π½Π΅ давая возмоТности Π·Π»ΠΎΡƒΠΌΡ‹ΡˆΠ»Π΅Π½Π½ΠΈΠΊΠ°ΠΌ Π·Π°ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½Ρ‹Π΅ скрипты посрСдством ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ²).

НиТС прСдставлСн ΠΏΡ€ΠΈΠΌΠ΅Ρ€ использования элСмСнта <embed> для вставки Flash-Ρ„ΠΈΠ»ΡŒΠΌΠ°Β (заглянитС Π½Π°Β live on Github, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π½Π°Β check the source code):

<embed src="whoosh.swf" quality="medium"
       bgcolor="#ffffff"
       name="whoosh" align="middle" allowScriptAccess="sameDomain"
       allowFullScreen="false" type="application/x-shockwave-flash"
       pluginspage="http://www. macromedia.com/go/getflashplayer">

Достаточно уТасно, Π½Π΅ Ρ‚Π°ΠΊ Π»ΠΈ?Β Html-ΠΊΠΎΠ΄, Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅ΠΌΡ‹ΠΉ Flash, ΠΈΠΌΠ΅Π» ΡΠΊΠ»ΠΎΠ½Π½ΠΎΡΡ‚ΡŒ Π±Ρ‹Ρ‚ΡŒ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ…ΡƒΠΆΠ΅. Он использовал элСмСнт <object> вмСстС со встроСнным элСмСнтом <embed> для скрытия всСго Ρ„ΡƒΠ½Π΄Π°ΠΌΠ΅Π½Ρ‚Π° (взглянитС Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€). Flash Ρ€Π°Π½Π΅Π΅ использовался Π² качСствС Ρ€Π΅Π·Π΅Ρ€Π²Π° для HTML5-Π²ΠΈΠ΄Π΅ΠΎ (Π² случаС Π΅Π³ΠΎ отсутствия), Π½ΠΎ со Π²Ρ€Π΅ΠΌΠ΅Π½Π΅ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ Π² этом ΠΎΡ‚ΠΏΠ°Π»Π°.

Π”Π°Π²Π°ΠΉΡ‚Π΅ взглянСм Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Β <object>Β , Π²ΡΡ‚Ρ€Π°ΠΈΠ²Π°ΡŽΡ‰Π΅Π³ΠΎ PDF в страницу (взглянитС live exampleΒ ΠΈΒ source code):

<object data="mypdf.pdf" type="application/pdf"
        typemustmatch>
  <p>You don't have a PDF plugin, but you can <a href="mypdf.pdf">download the PDF file.</a></p>
</object>

PDF-Ρ„Π°ΠΉΠ»Ρ‹ Π±Ρ‹Π»ΠΈ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ΠΌ срСдством достиТСния Ρ†Π΅Π»ΠΈΒ Π² качСствС прСобразования Π±ΡƒΠΌΠ°ΠΆΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ Π² Ρ†ΠΈΡ„Ρ€ΠΎΠ²ΡƒΡŽ, Π½ΠΎ, Π² Ρ‚ΠΎ ΠΆΠ΅ врСмя, ΠΎΠ½ΠΈ ΠΈΠΌΠ΅ΡŽΡ‚ мноТСство ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ доступности ΠΈ ΠΏΠ»ΠΎΡ…ΠΎ Ρ‡ΠΈΡ‚Π°Π΅ΠΌΡ‹ Π½Π° ΠΌΠ΅Π»ΠΊΠΈΡ… экранах. Π’ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΊΡ€ΡƒΠ³Π°Ρ… ΠΎΠ½ΠΈ всё Π΅Ρ‰Ρ‘ ΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ ΠΏΠΎΠΏΡƒΠ»ΡΡ€Π½ΠΎΡΡ‚ΡŒΡŽ, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Π·Π°ΠΌΠ΅Ρ‚ΠΈΠΌ, Ρ‡Ρ‚ΠΎ вмСсто встраивания Π² страницу слСдуСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ссылки (для скачивания ΠΈΠ»ΠΈ чтСния Π½Π° ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅).

Π”Π΅Π»ΠΎ ΠΏΡ€ΠΎΡ‚ΠΈΠ² ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ²

Когда-Ρ‚ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ Π±Ρ‹Π»ΠΈ Π½Π΅Π·Π°ΠΌΠ΅Π½ΠΈΠΌΡ‹ Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅. ΠŸΠΎΠΌΠ½ΠΈΡ‚Π΅ Π΄Π½ΠΈ, ΠΊΠΎΠ³Π΄Π° Π²Π°ΠΌ ΠΏΡ€ΠΈΡ…ΠΎΠ΄ΠΈΠ»ΠΎΡΡŒ ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒ Adobe Flash Player для просмотра ΠΎΠ½Π»Π°ΠΉΠ½-Ρ„ΠΈΠ»ΡŒΠΌΠ°? И ΠΏΠΎΡ‚ΠΎΠΌ постоянно Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π»ΠΈ Ρ€Π°Π·Π΄Ρ€Π°ΠΆΠ°ΡŽΡ‰ΠΈΠ΅ прСдупрСТдСния ΠΎΠ± ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΈ Flash Player ΠΈ Java Runtime Environment. Π‘ Ρ‚Π΅Ρ… ΠΏΠΎΡ€ Π²Π΅Π±-Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ стали Π½Π°ΠΌΠ½ΠΎΠ³ΠΎΒ Π½Π°Π΄Ρ‘ΠΆΠ½Π΅Π΅. ΠŸΠΎΡ‡Ρ‚ΠΈ всСм сСрвисам ΠΏΡ€ΠΈΡˆΠ»ΠΎ врСмя ΠΏΡ€Π΅ΠΊΡ€Π°Ρ‚ΠΈΡ‚ΡŒ Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ²Β ΠΈ вмСсто этого ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²Π΅Π±-Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ.

  • Π Π°ΡΡˆΠΈΡ€ΡŒΡ‚Π΅ свою Π΄ΠΎΡΡΠ³Π°Π΅ΠΌΠΎΡΡ‚ΡŒ для всСх. Π£ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π΅ΡΡ‚ΡŒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€, Π½ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ всС Ρ€Π΅ΠΆΠ΅, особСнно срСди ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Web Π² Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ стСпСни ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π±Π΅Π· ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ², люди ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Π»ΠΈ Π±Ρ‹ просто ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π½Π° сайты Π²Π°ΡˆΠΈΡ… ΠΊΠΎΠ½ΠΊΡƒΡ€Π΅Π½Ρ‚ΠΎΠ², Ρ‡Π΅ΠΌ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΠ»Π°Π³ΠΈΠ½.
  • НСмного ΠΏΠ΅Ρ€Π΅Π΄ΠΎΡ…Π½ΠΈΡ‚Π΅ ΠΎΡ‚Β Π»ΠΈΡˆΠ½ΠΈΡ… Π³ΠΎΠ»ΠΎΠ²Π½Ρ‹Ρ… Π±ΠΎΠ»Π΅ΠΉ, связанных с ΠΎΠ±Ρ‰Π΅Π΄ΠΎΡΡ‚ΡƒΠΏΠ½ΠΎΡΡ‚ΡŒΡŽ Flash-ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² ΠΈ Π΄Ρ€. (Β extra accessibility headachesΒ ).
  • Π˜Π·Π±Π΅Π³Π°ΠΉΡ‚Π΅ Π»ΠΈΡˆΠ½ΠΈΡ… ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ бСзопасности. Ни для ΠΊΠΎΠ³ΠΎ Π½Π΅ сСкрСт,Ρ‡Ρ‚ΠΎ Adobe Flash являСтся нСбСзопасным, Π΄Π°ΠΆΠ΅ послС многочислСнных ΠΏΠ°Ρ‚Ρ‡Π΅ΠΉ. Π’Β 2015, АлСкс Бтэймос (Π±Ρ‹Π²ΡˆΠΈΠΉ Π³Π»Π°Π²Π½Ρ‹ΠΉ сотрудник ΠΏΠΎ вопросам ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ бСзопасности ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ Facebook)Β Π΄Π°ΠΆΠ΅ Π΄Π΅Π»Π°Π» запрос, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Adobe ΠΏΡ€Π΅ΠΊΡ€Π°Ρ‚ΠΈΠ» ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ Flash.

Π˜Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ? Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½Π° ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ, HTML ΠΈ JavaScript ΠΌΠΎΠ³ΡƒΡ‚ Π»Π΅Π³ΠΊΠΎ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ Π·Π°Π΄Π°Π½ΠΈΠ΅ для вас Π±Π΅Π· нСобходимости использования Π°ΠΏΠΏΠ»Π΅Ρ‚ΠΎΠ² Java ΠΈΠ»ΠΈ ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠ΅ΠΉ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ ActiveX / BHO. ВмСсто Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ Π½Π° Adobe Flash, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²ΠΈΠ΄Π΅ΠΎ HTML5 для своих ΠΌΠ΅Π΄ΠΈΠ°-потрСбностСй, SVG для Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ ΠΈ Canvas для слоТных ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ. ΠŸΠΈΡ‚Π΅Ρ€ Элст ΡƒΠΆΠ΅ писал нСсколько Π»Π΅Ρ‚ Π½Π°Π·Π°Π΄, Ρ‡Ρ‚ΠΎ Adobe Flash Ρ€Π΅Π΄ΠΊΠΎ являСтся подходящим инструмСнтом для Ρ€Π°Π±ΠΎΡ‚Ρ‹, Π·Π° ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ спСциализированных ΠΈΠ³Ρ€ ΠΈ бизнСс-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π§Ρ‚ΠΎ касаСтся ActiveX, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Microsoft Edge (en-US) большС Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Π΅Π³ΠΎ.

Π’Π΅ΠΌΠ° встраивания Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π² Π²Π΅Π±-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Ρ‹ ΠΏΠΎΠ½Π°Ρ‡Π°Π»Ρƒ ΠΌΠΎΠΆΠ΅Ρ‚Β ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ ΠΎΡ‡Π΅Π½ΡŒ слоТной для понимания, поэтому Π² этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ ΠΏΠΎΠΏΡ‹Ρ‚Π°Π»ΠΈΡΡŒ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π΅Ρ‘ простым, Π·Π½Π°ΠΊΠΎΠΌΡ‹ΠΌ способом, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ сразу ΠΆΠ΅ станСт Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΌ, Π½ΠΎ всё ΠΆΠ΅ Π½Π°ΠΌΠ΅ΠΊΠ°Π΅Ρ‚ Π½Π° Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ· Π±ΠΎΠ»Π΅Π΅ слоТных Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ Π²ΠΎΠ²Π»Π΅Ρ‡Ρ‘Π½Π½Ρ‹Ρ… Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ. Начнём с Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ вряд Π»ΠΈ Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ большоС количСство встраивании стороннСго ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, ΠΏΠΎΠΌΠΈΠΌΠΎ встроСнных ΠΊΠ°Ρ€Ρ‚ ΠΈ Π²ΠΈΠ΄Π΅ΠΎ Π½Π° своих страницах.

БущСствуСт ΠΌΠ½ΠΎΠ³ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΡ… Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ Π² сСбя Π²Π½Π΅Π΄Ρ€Π΅Π½ΠΈΠ΅ внСшнСго ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, ΠΏΠΎΠΌΠΈΠΌΠΎ Ρ‚Π΅Ρ…, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ обсуТдали здСсь. ΠœΡ‹ Π²ΠΈΠ΄Π΅Π»ΠΈ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ· Ρ€Π°Π½Π½ΠΈΡ… статСй, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ <video>, <audio> ΠΈ <img>, Π½ΠΎ Π΅ΡΡ‚ΡŒ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅. НапримСр, <canvas> для 2D-ΠΈ 3D-Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, сгСнСрированной JavaScript, ΠΈ <svg> для встраивания Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ. ΠœΡ‹ рассмотрим SVG Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅ модуля.

Π’Π΅Π³ iframe



ΠŸΡ€ΠΈΠΌΠ΅Ρ€

ВстроСнный Ρ„Ρ€Π΅ΠΉΠΌ ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

<iframe src=»https://html5css. ru»></iframe>

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

ВстроСнный Ρ„Ρ€Π΅ΠΉΠΌ ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:




Π’Π΅Π³ IFRAME

<iframe src=»frame_b.htm»>
Π’Π°Ρˆ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ Ρ„Ρ€Π΅ΠΉΠΌΡ‹!
</iframe>

</body>
</html>

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ содСрТания Ρ„Π°ΠΉΠ»Π° frame_b.htm



<h4>Frame B</h4>

</body>
</html>


ΠžΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΈ использованиС

Π’Π΅Π³ <iframe> опрСдСляСт встроСнный Ρ„Ρ€Π΅ΠΉΠΌ.

ВстроСнный Ρ„Ρ€Π΅ΠΉΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для встраивания Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° Π² Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΠΉ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ HTML.


ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚
<iframe>Π”Π°Π”Π°Π”Π°Π”Π°Π”Π°

Π‘ΠΎΠ²Π΅Ρ‚Ρ‹ ΠΈ примСчания

Π‘ΠΎΠ²Π΅Ρ‚: Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ Π΄Π΅Π»ΠΎ с обозрСватСлями, Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‰ΠΈΠΌΠΈ <iframe>, Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ тСкст ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌ Ρ‚Π΅Π³ΠΎΠΌ <iframe> ΠΈ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌ Ρ‚Π΅Π³ΠΎΠΌ </iframe>.

Π‘ΠΎΠ²Π΅Ρ‚: Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ CSS для стиля <iframe> (Π΄Π°ΠΆΠ΅ для Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ).


Различия ΠΌΠ΅ΠΆΠ΄Ρƒ HTML 4,01 ΠΈ HTML5

HTML5 Π΄ΠΎΠ±Π°Π²ΠΈΠ» Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½ΠΎΠ²Ρ‹Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹, ΠΈ нСсколько Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² HTML 4,01 ΡƒΠ΄Π°Π»Π΅Π½Ρ‹ ΠΈΠ· HTML5.


Различия ΠΌΠ΅ΠΆΠ΄Ρƒ HTML ΠΈ XHTML

Π’ XHTML Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ name являСтся ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠΈΠΌ ΠΈ Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΠ΄Π°Π»Π΅Π½. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ глобального ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π° ВмСсто.



Атрибуты

= Новый Π² HTML5.

ΠΡ‚Ρ€ΠΈΠ±ΡƒΡ‚Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠžΠΏΠΈΡΠ°Π½ΠΈΠ΅
alignleft
right
top
middle
bottom
НС поддСрТиваСтся Π² HTML5.
Π—Π°Π΄Π°Π΅Ρ‚ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ <iframe> Π² соотвСтствии с ΠΎΠΊΡ€ΡƒΠΆΠ°ΡŽΡ‰ΠΈΠΌΠΈ элСмСнтами
frameborder1
0
НС поддСрТиваСтся Π² HTML5.
Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Π»ΠΈ Ρ€Π°ΠΌΠΊΡƒ Π²ΠΎΠΊΡ€ΡƒΠ³ <iframe>
heightpixelsΠ—Π°Π΄Π°Π΅Ρ‚ высоту <iframe>
longdescURLНС поддСрТиваСтся Π² HTML5.
Π—Π°Π΄Π°Π΅Ρ‚ страницу, ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‰ΡƒΡŽ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΠ΅ описаниС содСрТимого <iframe>
marginheightpixelsНС поддСрТиваСтся Π² HTML5.
Π—Π°Π΄Π°Π΅Ρ‚ Π²Π΅Ρ€Ρ…Π½ΠΈΠ΅ ΠΈ Π½ΠΈΠΆΠ½ΠΈΠ΅ поля содСрТимого <iframe>
marginwidthpixelsНС поддСрТиваСтся Π² HTML5.
Π—Π°Π΄Π°Π΅Ρ‚ Π»Π΅Π²ΠΎΠ΅ ΠΈ ΠΏΡ€Π°Π²ΠΎΠ΅ поля содСрТимого <iframe>
nametextΠ—Π°Π΄Π°Π΅Ρ‚ имя <iframe>
sandboxallow-forms
allow-pointer-lock
allow-popups
allow-same-origin
allow-scripts
allow-top-navigation
Π’ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠΉ для содСрТимого Π² <iframe>
scrollingyes
no
auto
НС поддСрТиваСтся Π² HTML5.
Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Π»ΠΈ полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π² <iframe>
srcURLΠ—Π°Π΄Π°Π΅Ρ‚ адрСс Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° для встраивания Π² <iframe>
srcdocHTML_codeΠ—Π°Π΄Π°Π΅Ρ‚ HTML-содСрТимоС страницы, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π² <iframe>
widthpixelsΠ—Π°Π΄Π°Π΅Ρ‚ ΡˆΠΈΡ€ΠΈΠ½Ρƒ <iframe>

Π“Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹

Π’Π΅Π³ <iframe> Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Π“Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ Π² HTML.


Атрибуты события

Π’Π΅Π³ <iframe> Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Атрибуты событий Π² HTML.


ΠŸΠΎΡ…ΠΎΠΆΠΈΠ΅ страницы

HTML Π£Ρ‡Π΅Π±Π½ΠΈΠΊ: HTML Iframes

HTML DOM Бсылки: IFrame Object


ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ CSS ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ

Π’ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ ΠΎΠ±ΠΎΠ·Ρ€Π΅Π²Π°Ρ‚Π΅Π»Π΅ΠΉ элСмСнт <iframe> Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ со ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌΠΈ значСниями ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ:

iframe:focus {
Β Β Β  outline: none;
}

iframe[seamless] {
Β Β Β  display: block;
}

ОбъяснСния Для ΠΠ°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ… И ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹

iFrame это сокращСниС ΠΎΡ‚ Inline Frame. Π­Ρ‚ΠΎ ΠΌΠΎΡ‰Π½Ρ‹ΠΉ элСмСнт Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅. ВСроятно, Π²Ρ‹ Π²ΠΈΠ΄Π΅Π»ΠΈ бСсчислСнноС количСство Π²ΠΈΠ΄Π΅ΠΎ Π½Π° YouTube, Ρ€Π°Π·ΠΌΠ΅Ρ‰Ρ‘Π½Π½Ρ‹Ρ… Π½Π° Π΄Ρ€ΡƒΠ³ΠΈΡ… сайтах, ΠΊΡ€ΠΎΠΌΠ΅ YouTube. IFrame ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ всС Π²ΠΈΠ΄Ρ‹ носитСлСй. И поэтому Π²Π°ΠΌ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ интСрСсно, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅Β iFrame ΠΈ ΠΊΠ°ΠΊ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ. Π’Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ помСстит элСмСнт iFrame Π½Π° этой страницС.

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ рассмотрим, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ iFrame ΠΈ способы Π΅Π³ΠΎ использования, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΡ… Π²Π΅Ρ‰Π°Ρ…, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ стоит Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ Π²Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚Π΅ iFrame Π² свой HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ iFrame

IFrame β€” это ΠΊΠ°Π΄Ρ€ Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠ°Π΄Ρ€Π°. Π­Ρ‚ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ HTML-элСмСнта, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт Π²ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Ρ‹, Π²ΠΈΠ΄Π΅ΠΎ ΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΌΠ΅Π΄ΠΈΠ°Ρ„Π°ΠΉΠ»Ρ‹ Π½Π° страницу. ДСлая это, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ Π²Π΅Π±-страницу Π½Π° Π³Π»Π°Π²Π½ΠΎΠΉ страницС.

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ iFrame позволяСт Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ Ρ‡Π°ΡΡ‚ΡŒ содСрТимого ΠΈΠ· Π΄Ρ€ΡƒΠ³ΠΈΡ… источников. Он ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠ½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π² любом мСстС Π½Π° вашСй страницС, Π±Π΅Π· нСобходимости Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ ΠΈΡ… Π² структуру Π²Π΅Π±-ΠΌΠ°ΠΊΠ΅Ρ‚Π°, ΠΊΠ°ΠΊ Ρ‚Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ элСмСнт.

Π’Ρ‹ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ iFrame Ρ‡Ρ€Π΅Π·ΠΌΠ΅Ρ€Π½ΠΎ, это ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π°ΠΌΠ΅Π΄Π»ΠΈΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ вашСй страницы ΠΈ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΡƒΠ³Ρ€ΠΎΠ·Ρƒ бСзопасности, особСнно Ссли Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ с ΠΏΠΎΠ΄ΠΎΠ·Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ Π²Π΅Π±-сайта. РассматривайтС iFrame ΠΊΠ°ΠΊ Ρ‡Π°ΡΡ‚ΡŒ вашСго ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, Π½ΠΎ Π½Π΅ ΠΊΠ°ΠΊ Ρ‡Π°ΡΡ‚ΡŒ вашСго сайта. НапримСр, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π²ΠΈΠ΄Π΅ΠΎ ΠΈΠ· YouTube, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΡ‚ΠΈΠΌΡƒΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π²Π°ΡˆΠΈΡ… Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»Π΅ΠΉ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ элСмСнт iFrame Π² свой пост.

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ: Как Π’ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π’ΠΈΠ΄Π΅ΠΎ Π² WordPressΒ (Π°Π½Π³Π»)

Как ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ–Frame

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅, Ρ‡Ρ‚ΠΎ Ρ–Frame β€” это Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ элСмСнт для ΠΎΠ±ΠΌΠ΅Π½Π° ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ с Π΄Ρ€ΡƒΠ³ΠΈΡ… сайтов. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π΅Π³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ читатСлям контСкст Π½Π° ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½ΡƒΡŽ Ρ‚Π΅ΠΌΡƒ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ элСмСнт iFrame HTML, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Ρ‚Π΅Π³ <iframe> Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅ HTML. Π‘ΠΊΠΎΠΏΠΈΡ€ΡƒΠΉΡ‚Π΅ ΠΏΡ€ΠΈΠ²Π΅Π΄Ρ‘Π½Π½Ρ‹ΠΉ Π½ΠΈΠΆΠ΅ ΠΊΠΎΠ΄, Π²ΡΡ‚Π°Π²ΡŒΡ‚Π΅ Π΅Π³ΠΎ Π² Π±Π»ΠΎΠΊΠ½ΠΎΡ‚ ΠΈ сохранитС Ρ„Π°ΠΉΠ» Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ .html:

<iframe src="https://www.youtube.com/embed/dXBohfjc4WA" allowfullscreen></iframe>

Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Ρ‘Π½Π½ΠΎΠΌ Π²Ρ‹ΡˆΠ΅ ΠΊΠΎΠ΄Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ ΠΎΠ±ΡƒΡ‡Π°ΡŽΡ‰Π΅Π΅ Π²ΠΈΠ΄Π΅ΠΎ YouTube ΠΎΡ‚ Hostinger. Π”Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ‚Π΅Π³ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ:

  • Π’Π΅Π³ <iframe>…</iframe> ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для размСщСния Π²ΠΈΠ΄Π΅ΠΎ Π² Ρ–Frame.
  • Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ Ρ–Frame (src) являСтся источником ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° с внСшнСго ΠΈΠ»ΠΈ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅Π³ΠΎ сСрвСра. НС Π·Π°Π±ΡƒΠ΄ΡŒΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ встроСнный ΠΊΠΎΠ΄ Π² URL.
  • WidthΒ ΠΈ height β€” это ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ сторон ΠΊΠ°Π΄Ρ€Π°. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ фиксированныС Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ 680 Γ— 480 пиксСлСй (px), ΠΊΠ°ΠΊ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅. Или Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠ΅Ρ‚ΠΎΠ΄ Π½Π° основС ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π° (10% -100%) для автоматичСской настройки Ρ–Frame.

Π£Π³Ρ€ΠΎΠ·Ρ‹ бСзопасности

По своСй ΠΏΡ€ΠΈΡ€ΠΎΠ΄Π΅ элСмСнт Ρ–Frame Π½Π΅ прСдставляСт Π½ΠΈΠΊΠ°ΠΊΠΎΠΉ ΡƒΠ³Ρ€ΠΎΠ·Ρ‹ бСзопасности для вашСй Π²Π΅Π±-страницы ΠΈΠ»ΠΈ Π²Π°ΡˆΠΈΡ… Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»Π΅ΠΉ. Частично, ΠΎΠ½ Π±Ρ‹Π» Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ создатСлям ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π» для Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»Π΅ΠΉ. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Π½Π°Π΄Ρ‘ΠΆΠ½ΠΎΡΡ‚ΡŒ сайта ΠΏΡ€ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ Ρ–Frame.

Π’ 2008 Π³ΠΎΠ΄Ρƒ ΠΏΡ€ΠΎΠΈΠ·ΠΎΡˆΡ‘Π» всплСск внСдрСния ΠΊΠΎΠ΄Π° Ρ–Frame Π½Π° Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π·Π°ΠΊΠΎΠ½Π½Ρ‹Ρ… Π²Π΅Π±-сайтах, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ новости ABC. Π­Ρ‚ΠΎΡ‚ Ρ‚ΠΈΠΏ Π°Ρ‚Π°ΠΊΠΈ пСрСнаправляСт посСтитСлСй Π½Π° врСдоносный сайт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π·Π°Ρ‚Π΅ΠΌ устанавливаСт вирус Π½Π° ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€ посСтитСлСй ΠΈΠ»ΠΈ пытаСтся ΡƒΠΊΡ€Π°ΡΡ‚ΡŒ ΠΊΠΎΠ½Ρ„ΠΈΠ΄Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ. Π’ΠΎΡ‚ ΠΏΠΎΡ‡Π΅ΠΌΡƒ Π½Π΅ рСкомСндуСтся Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ iFrame ΠΊΠ°ΠΊ Π½Π΅ΠΎΡ‚ΡŠΠ΅ΠΌΠ»Π΅ΠΌΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ вашСго сайта.

Если Π²Ρ‹ считаСтС, Ρ‡Ρ‚ΠΎ Π²Π΅Π±-сайт нСбСзопасСн, Π΄Π°ΠΆΠ΅ Π½Π΅ связывайтС Π΅Π³ΠΎ ΠΈ Π½Π΅ ΠΏΠΎΠΌΠ΅Ρ‰Π°ΠΉΡ‚Π΅ Π΅Π³ΠΎ содСрТимоС Π² элСмСнт iFrame.

Π’Π°ΠΌ Π½ΡƒΠΆΠ΅Π½ сайт? Π’Ρ‹ Π² поисках Π»ΡƒΡ‡ΡˆΠ΅Π³ΠΎ хостинг-ΠΏΡ€ΠΎΠ²Π°ΠΉΠ΄Π΅Ρ€Π°? Π’ΠΎΠ³Π΄Π° ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ Hostinger.

ΠΠ°Ρ‡Π°Ρ‚ΡŒ сСйчас

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

Π’ ΠΎΠ±Ρ‰Π΅ΠΌ, Ρ–Frame являСтся ΠΌΠΎΡ‰Π½Ρ‹ΠΌ элСмСнтом, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ваши посСтитСли ΠΎΠ±Ρ€Π°Ρ‚ΠΈΠ»ΠΈ большС внимания. Π”ΡƒΠΌΠ°ΠΉΡ‚Π΅ ΠΎΠ± Ρ–Frame ΠΊΠ°ΠΊ ΠΎ части ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π²Ρ‹ создаётС, Π° Π½Π΅ ΠΊΠ°ΠΊ ΠΎ Π½Π΅ΠΎΡ‚ΡŠΠ΅ΠΌΠ»Π΅ΠΌΠΎΠΉ части вашСго сайта. Π’Ρ‹ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ–Frame Ρ‡Ρ€Π΅Π·ΠΌΠ΅Ρ€Π½ΠΎ. Π›ΡƒΡ‡ΡˆΠ΅, Ссли Π²Ρ‹ смоТСтС Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ свой сайт Π±Π΅Π· Ρ–Frame. Если Π²Π°ΠΌ всё Π΅Ρ‰Ρ‘ Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π² цСлях Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ, Π½Π΅ Π·Π°Π±Ρ‹Π²Π°ΠΉΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ с Π·Π°ΡΠ»ΡƒΠΆΠΈΠ²Π°ΡŽΡ‰Π΅Π³ΠΎ довСрия сайта. ΠœΡ‹ надССмся, Ρ‡Ρ‚ΠΎ эта ΡΡ‚Π°Ρ‚ΡŒΡ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ Π² Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΈ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠΈ, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ iFrame.

Анна Π΄ΠΎΠ»Π³ΠΎΠ΅ врСмя Ρ€Π°Π±ΠΎΡ‚Π°Π»Π° Π² сфСрС ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтСй ΠΈ мСсСдТСров, Π½ΠΎ сСйчас Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎ ΡƒΠ²Π»Π΅ΠΊΠ»Π°ΡΡŒ созданиСм ΠΈ сопровоТдСниСм сайтов. Она Π»ΡŽΠ±ΠΈΡ‚ ΡƒΠ·Π½Π°Π²Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π½ΠΎΠ²ΠΎΠ΅ ΠΈ постоянно находится Π² поискС Π½ΠΎΠ²ΠΈΠ½ΠΎΠΊ ΠΈ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΉ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄Π΅Π»ΠΈΡ‚ΡŒΡΡ ΠΈΠΌΠΈ с ΠΌΠΈΡ€ΠΎΠΌ. Π•Ρ‰Ρ‘ Анна увлСкаСтся ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅ΠΌ иностранных языков. БСйчас Π΅Ρ‘ ΡƒΠ²Π»Ρ‘ΠΊ язык программирования!

Π’Π΅Π³ | HTML справочник

HTML Ρ‚Π΅Π³ΠΈ

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅

Π’Π΅Π³ <iframe> (HTML Inline Frame Element) опрСдСляСт Π²ΡΡ‚Ρ€ΠΎΠ΅Π½Π½ΡƒΡŽ Π² Π²Π΅Π±-страницу ΠΎΠ±Π»Π°ΡΡ‚ΡŒ, которая ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ содСрТимоС ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ взятого Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, *. pdf), ΠΌΠ΅Π΄ΠΈΠ°-ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ Π²Π΅Π±-сайта Π² Π·Π°Π΄Π°Π½Π½ΠΎΠΌ пространствС. Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ Π²Π½ΡƒΡ‚Ρ€ΠΈ области сущСствуСт нСзависимо ΠΎΡ‚ ΠΎΠΊΡ€ΡƒΠΆΠ°ΡŽΡ‰Π΅ΠΉ страницы.

Бинтаксис для добавлСния Ρ„Ρ€Π΅ΠΉΠΌΠ°:

<iframe src = "URL"> </iframe>, Π³Π΄Π΅ src Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ опрСдСляСт мСстополоТСниС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° ΠΈΠ»ΠΈ Π²Π΅Π±-сайта.

ΠžΠ±Ρ€Π°Ρ‰Π°ΡŽ Π’Π°ΡˆΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Π½Π° Ρ‚ΠΎ Ρ‡Ρ‚ΠΎ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ сайты, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ поисковыС систСмы, Π±Π»ΠΎΠΊΠΈΡ€ΡƒΡŽΡ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ размСщСния страницы сайта Π²ΠΎ Ρ„Ρ€Π΅ΠΉΠΌΠ°Ρ…, Π»ΠΈΠ±ΠΎ ΠΎΡΡƒΡ‰Π΅ΡΡ‚Π²Π»ΡΡŽΡ‚ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΏΠΎ Ρ‚Π°ΠΉΠΌΠ΅Ρ€Ρƒ Π½Π° свою Β«Ρ€Π΅Π°Π»ΡŒΠ½ΡƒΡŽΒ» страницу.


ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ

Атрибуты

ΠΡ‚Ρ€ΠΈΠ±ΡƒΡ‚Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠžΠΏΠΈΡΠ°Π½ΠΈΠ΅
alignleft
right
top
middle
bottom
НС поддСрТиваСтся Π² HTML5.
ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ элСмСнта Π² соотвСтствии с ΠΎΠΊΡ€ΡƒΠΆΠ°ΡŽΡ‰ΠΈΠΌΠΈ элСмСнтами.
frameborder0
1
НС поддСрТиваСтся Π² HTML5.
Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, слСдуСт Π»ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Ρ€Π°ΠΌΠΊΡƒ Π²ΠΎΠΊΡ€ΡƒΠ³ элСмСнта.
heightpixelsΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ высоту элСмСнта.
longdescURLНС поддСрТиваСтся Π² HTML5.
Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ страницу, ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‰ΡƒΡŽ Π΄Π»ΠΈΠ½Π½ΠΎΠ΅ описаниС содСрТания элСмСнта.
marginheightpixelsНС поддСрТиваСтся Π² HTML5.
ΠžΡ‚ΡΡ‚ΡƒΠΏ свСрху ΠΈ снизу ΠΎΡ‚ содСрТания Π΄ΠΎ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ Ρ„Ρ€Π΅ΠΉΠΌΠ°.
marginwidthpixelsНС поддСрТиваСтся Π² HTML5.
Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ отступ слСва ΠΈ справа ΠΎΡ‚ содСрТания Π΄ΠΎ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ Ρ„Ρ€Π΅ΠΉΠΌΠ°.
nametextΠ—Π°Π΄Π°Ρ‘Ρ‚ имя элСмСнта.
sandboxallow-forms
allow-pointer-lock
allow-popups
allow-same-origin
allow-scripts
allow-top-navigation
Π’ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠΉ для содСрТания Π² элСмСнтС.
scrollingauto
yes
no
НС поддСрТиваСтся Π² HTML5.
Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ ΠΈΠ»ΠΈ Π½Π΅Ρ‚ полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π² элСмСнтС.
srcURLΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ адрСс Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° для встраивания Π² элСмСнт.
srcdocHTML_codeΠ£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ HTML-ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠΊΠ°Π·Π°Π½ Π²ΠΎ Ρ„Ρ€Π΅ΠΉΠΌΠ΅.
widthpixelsΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ ΡˆΠΈΡ€ΠΈΠ½Ρƒ элСмСнта.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ возьмСм Π² качСствС Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Π²ΠΎ Ρ„Ρ€Π΅ΠΉΠΌ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ сайт — TinyPng.com, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ прСдоставляСт Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΡΠΆΠΈΠΌΠ°Ρ‚ΡŒ изобраТСния, ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π½Ρ‹Π΅ ΠΊ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ Π½Π° Π’Π°Ρˆ сайт. Как ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, удаётся ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° 50%, Π° Ρ‚ΠΎ ΠΈ большС, Ρ‡Ρ‚ΠΎ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Π΅Ρ‚ ΠΈΡ… объСм, экономит дисковоС пространство ΠΈ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ страниц.

<!DOCTYPE html>
<html>
	<head>
		<title>ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования элСмСнта <iframe></title>
	</head>
	<body>
		<iframe name = "myframe" width = "665px" height = "265px" src = "https://tinypng.com"></iframe><br> <!-- Π² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π΅ src ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΉ адрСс сайта, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ…ΠΎΡ‚ΠΈΠΌ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Π²ΠΎ Ρ„Ρ€Π΅ΠΉΠΌΠ΅ -->
		<a href = "https://tinypng. com" target = "myframe">TinyPng</a> <!-- ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ ссылка откроСтся Π²ΠΎ Ρ„Ρ€Π΅ΠΉΠΌΠ΅ -->
		<a href = "moscow.jpg" target = "myframe">Moscow</a> <!-- Π·Π°Π΄Π°Π΅ΠΌ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΡƒΡ‚ΡŒ ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ ΠΈ имя Ρ„Ρ€Π΅ΠΉΠΌΠ°, Π³Π΄Π΅ ΠΎΠ½ΠΎ откроСтся -->
		<a href = "paris.jpg" target = "myframe">Paris</a> <!-- Π·Π°Π΄Π°Π΅ΠΌ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΡƒΡ‚ΡŒ ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ ΠΈ имя Ρ„Ρ€Π΅ΠΉΠΌΠ°, Π³Π΄Π΅ ΠΎΠ½ΠΎ откроСтся -->
		<a href = "london.jpg" target = "myframe">London</a> <!-- Π·Π°Π΄Π°Π΅ΠΌ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΡƒΡ‚ΡŒ ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ ΠΈ имя Ρ„Ρ€Π΅ΠΉΠΌΠ°, Π³Π΄Π΅ ΠΎΠ½ΠΎ откроСтся -->
	</body>
</html>

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹:

  • Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ΠΎΠΌ <iframe> создали Ρ„Ρ€Π΅ΠΉΠΌ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ name Π·Π°Π΄Π°Π»ΠΈ имя — «myframe», Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ width установили ΡˆΠΈΡ€ΠΈΠ½Ρƒ Ρ„Ρ€Π΅ΠΉΠΌΠ° «665px», Π° Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ height высоту Ρ„Ρ€Π΅ΠΉΠΌΠ° «265px» . Π’ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΌ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π΅ src ΡƒΠΊΠ°Π·Π°Π»ΠΈ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΉ адрСс сайта, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ…ΠΎΡ‚ΠΈΠΌ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Π²ΠΎ Ρ„Ρ€Π΅ΠΉΠΌΠ΅ «https://tinypng.com».
  • РазмСстили Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ ссылки, ΠΏΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ссылка открываСтся нСпосрСдствСнно Π²ΠΎ Ρ„Ρ€Π΅ΠΉΠΌΠ΅ (Π² Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° target ΡƒΠΊΠ°Π·Π°Π½ΠΎ имя нашСго Ρ„Ρ€Π΅ΠΉΠΌΠ° — «myframe»). ΠŸΠ΅Ρ€Π²Π°Ρ ссылка ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ сайт, Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½Π½Ρ‹ΠΉ ΠΈΠ·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ, Π° ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ Ρ‚Ρ€ΠΈ Π·Π°Π³Ρ€ΡƒΠΆΠ°ΡŽΡ‚ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ изобраТСния, находящиСся Π² Ρ‚ΠΎΠΉ ΠΆΠ΅ ΠΏΠ°ΠΏΠΊΠ΅, Ρ‡Ρ‚ΠΎ ΠΈ Ρ„Π°ΠΉΠ» с ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ.

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ нашСго ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°:

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования Ρ„Ρ€Π΅ΠΉΠΌΠΎΠ² Π² HTML.

Рассмотрим ΠΏΡ€ΠΈΠΌΠ΅Ρ€ добавлСния Π²ΠΈΠ΄Π΅ΠΎ с YouTube Π²ΠΎ Ρ„Ρ€Π΅ΠΉΠΌ:

<!DOCTYPE html>
<html>
	<head>
		<title>Π Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ Π²ΠΈΠ΄Π΅ΠΎ с YouTube</title>
	</head>
	<body>
		<p>Π Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ Π²ΠΈΠ΄Π΅ΠΎ с YouTube</p>
		<iframe  width = "320" height = "240" src = "https://www.youtube.com/embed/d9TpRfDdyU0?autoplay=1?loop=1&start=28&color=white">
		</iframe>
	</body>
</html>

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ элСмСнтом <iframe> ΠΌΡ‹ размСстили Ρ„Ρ€Π΅ΠΉΠΌ Π½Π° страницС ΠΈ Π·Π°Π΄Π°Π»ΠΈ для Π½Π΅Π³ΠΎ ΡˆΠΈΡ€ΠΈΠ½Ρƒ 320 пиксСлСй (Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ width) ΠΈ высоту 240 пиксСлСй (height). Π’ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π΅ src ΠΌΡ‹ ΡƒΠΊΠ°Π·Π°Π»ΠΈ ΠΏΡƒΡ‚ΡŒ ΠΊ страницС с Π²ΠΈΠ΄Π΅ΠΎ, ΡƒΠΊΠ°Π·Π°Π»ΠΈ ID Π²ΠΈΠ΄Π΅ΠΎ (Π²Ρ‹Π΄Π΅Π»Π΅Π½ курсивом) ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠΏΠ»Π΅Π΅Ρ€Π° YouTube (ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΠ΅ описаниС доступно Π² ΠΎΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΉ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ):

  • autoplay = «1» (Π²ΠΈΠ΄Π΅ΠΎ автоматичСски запускаСтся).
  • loop = «1» (ΠΏΡ€ΠΎΠΈΠ³Ρ€Ρ‹Π²Π°Ρ‚Π΅Π»ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ Π²ΠΎΡΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ΡŒ Π²ΠΈΠ΄Π΅ΠΎ ΠΏΠΎ ΠΊΡ€ΡƒΠ³Ρƒ, Π² бСсконСчном Ρ†ΠΈΠΊΠ»Π΅).
  • start = «28» (опрСдСляСт с ΠΊΠ°ΠΊΠΎΠΉ сСкунды начнСтся воспроизвСдСниС Π²ΠΈΠ΄Π΅ΠΎ, Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π΄Π»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ Ρ†Π΅Π»Ρ‹ΠΌ числом).
  • color = «white» (Π±Π΅Π³ΡƒΠ½ΠΎΠΊ просмотрСнного отмСряСт Π±Π΅Π»Ρ‹ΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ, ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ — красным).

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ нашСго ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°:

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π²ΠΈΠ΄Π΅ΠΎ с YouTube Π²ΠΎ Ρ„Ρ€Π΅ΠΉΠΌ.

Π‘ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ Π²ΠΈΠ΄Π΅ΠΎ с Π²ΠΈΠ΄Π΅ΠΎ хостинга YouTube Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΉΡ‚ΠΈ Π½Π° сайтС Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΡƒΡ‡Π΅Π±Π½ΠΈΠΊΠ° HTML 5 «Π Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ Π²ΠΈΠ΄Π΅ΠΎ с Π²ΠΈΠ΄Π΅ΠΎ хостинга YouTube».

ΠžΡ‚Π»ΠΈΡ‡ΠΈΡ HTML 4.01 ΠΎΡ‚ HTML 5

Π’ HTML5 Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΎ Π΄Π²Π° Π½ΠΎΠ²Ρ‹Ρ… Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°, Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… Π² HTML 4.01 Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² Π±Ρ‹Π»ΠΎ ΡƒΠ΄Π°Π»Π΅Π½ΠΎ.

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ CSS ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ

iframe [seamless] {
display: block;
}

iframe:focus {
outline: none;
}

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π³Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹Ρ… Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ²

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ «Π³Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹».

Атрибуты событий

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ «Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ событий».

HTML Ρ‚Π΅Π³ΠΈ

ACF — МСдиа (oEmbed)

ΠžΠ±Π·ΠΎΡ€

ПолС «МСдиа» позволяСт Π»Π΅Π³ΠΊΠΎ Π²ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ Π²ΠΈΠ΄Π΅ΠΎ, изобраТСния, Ρ‚Π²ΠΈΡ‚Ρ‹, Π°ΡƒΠ΄ΠΈΠΎ ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚. Π’ этом ΠΏΠΎΠ»Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ собствСнная Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ WP oEmbed.

Π‘ΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚Ρ‹

Настройки

ИмяОписаниС
Π Π°Π·ΠΌΠ΅Ρ€ мСдиаУстанавливаСт ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ высоту для встраиваСмого ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°.

Π˜ΡΡ‚ΠΎΡ€ΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ

  • Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΎ Π² v5.0.0

ИспользованиС в шаблонС

ПолС «МСдиа» Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ строку, ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‰ΡƒΡŽ встроСнный HTML. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΈΠ·-Π·Π° большого количСства встраиваСмого стороннСго ΠΊΠΎΠ΄Π° возмоТности настройки этого поля вСсьма ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Ρ‹. Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ эти ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ поиск / Π·Π°ΠΌΠ΅Π½Ρƒ Π² строкС ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚Ρ‹ Π² iframe.

ΠžΡΠ½ΠΎΠ²Ρ‹

Π’ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ вывСсти ΠΌΠ΅Π΄ΠΈΠ° ΠΏΠΎΠ»Π΅.

div>
	<?php the_field('oembed'); ?>
</div>

ΠŸΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚Ρ‹Π΅ возмоТности

Π’ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ для iframe ΠΈ html элСмСнтов.

<?php


$iframe = get_field('oembed');



preg_match('/src="(.+?)"/', $iframe, $matches);
$src = $matches[1];



$params = array(
    'controls'    => 0,
    'hd'        => 1,
    'autohide'    => 1
);

$new_src = add_query_arg($params, $src);

$iframe = str_replace($src, $new_src, $iframe);



$attributes = 'frameborder="0"';

$iframe = str_replace('></iframe>', ' ' . $attributes . '></iframe>', $iframe);



echo $iframe;

?>

АдаптивныС мСдиавлоТСния

Благодаря Ρ€Π°Π±ΠΎΡ‚Π΅, Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Π½ΠΎΠΉ embedresponsively.com , стало Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹ΠΌ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ мСдиавлоТСния Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ. ΠŸΠΎΠΆΠ°Π»ΡƒΠΉΡΡ‚Π°, ΠΈΠ·ΡƒΡ‡ΠΈΡ‚Π΅ сайт ΠΏΠΎ ссылкС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ встраиваСмого сСрвису ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΡ‚Ρ€Π΅Π±ΠΎΠ²Π°Ρ‚ΡŒΡΡ Ρ€Π°Π·Π½Ρ‹Π΅ настройки CSS.

<div>
	<?php the_field('oembed'); ?>
</div>
<style>
	.embed-container { 
		position: relative; 
		padding-bottom: 56.25%;
		overflow: hidden;
		max-width: 100%;
		height: auto;
	} 

	.embed-container iframe,
	. embed-container object,
	.embed-container embed { 
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
</style>

Вэг IFRAME

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π΅Π³Π° <IFRAME> ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠΉ Ρ„Ρ€Π΅ΠΉΠΌ Π½Π° страницС, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½ ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΉ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚. Для Ρ‚Π΅Π³Π° <IFRAME> ΠΌΠΎΠΆΠ½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ тСкст, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π² случаС, Ссли Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ Ρ„Ρ€Π΅ΠΉΠΌΡ‹.


<body>

 <iframe src="main.html" align="middle">
    Π’Π°Ρˆ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ Ρ„Ρ€Π΅ΠΉΠΌΡ‹!
 </iframe>

</body>

ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹:
align ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ способ обтСкания Ρ„Ρ€Π΅ΠΉΠΌΠ° ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ
frameborder УстанавливаСт, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Π³Ρ€Π°Π½ΠΈΡ†Ρƒ Π²ΠΎΠΊΡ€ΡƒΠ³ Ρ„Ρ€Π΅ΠΉΠΌΠ° ΠΈΠ»ΠΈ Π½Π΅Ρ‚
height Π—Π°Π΄Π°Π΅Ρ‚ Высоту Ρ„Ρ€Π΅ΠΉΠΌΠ°
hspace Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ отступ ΠΎΡ‚ Ρ„Ρ€Π΅ΠΉΠΌΠ° Π΄ΠΎ ΠΎΠΊΡ€ΡƒΠΆΠ°ΡŽΡ‰Π΅Π³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°
name Имя Ρ„Ρ€Π΅ΠΉΠΌΠ°
scrolling Бпособ отобраТСния полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π²ΠΎ Ρ„Ρ€Π΅ΠΉΠΌΠ΅
src ΠŸΡƒΡ‚ΡŒ ΠΊ Ρ„Π°ΠΉΠ»Ρƒ, содСрТимоС ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒΡΡ Π²ΠΎ Ρ„Ρ€Π΅ΠΉΠΌ
vspace Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ отступ ΠΎΡ‚ Ρ„Ρ€Π΅ΠΉΠΌΠ° Π΄ΠΎ ΠΎΠΊΡ€ΡƒΠΆΠ°ΡŽΡ‰Π΅Π³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°
width Π—Π°Π΄Π°Π΅Ρ‚ ΡˆΠΈΡ€ΠΈΠ½Ρƒ Ρ„Ρ€Π΅ΠΉΠΌΠ°

ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ ALIGN

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° задаСтся располоТСниС Ρ„Ρ€Π΅ΠΉΠΌΠ° Π½Π° страницС, Π° Ρ‚Π°ΠΊΠΆΠ΅ способ обтСкания Π΅Π³ΠΎ ΠΎΠΊΡ€ΡƒΠΆΠ°ΡŽΡ‰ΠΈΠΌ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ.
absmiddle Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ сСрСдины Ρ„Ρ€Π΅ΠΉΠΌΠ° ΠΏΠΎ сСрСдинС Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ строки
baseline Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Ρ„Ρ€Π΅ΠΉΠΌΠ° ΠΏΠΎ Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ строки
bottom Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π½ΠΈΠΆΠ½Π΅ΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ Ρ„Ρ€Π΅ΠΉΠΌΠ° ΠΏΠΎ ΠΎΠΊΡ€ΡƒΠΆΠ°ΡŽΡ‰Π΅ΠΌΡƒ тСксту *
left Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π΅Ρ‚ Ρ„Ρ€Π΅ΠΉΠΌ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ ΠΎΠΊΠ½Π°
middle Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ сСрСдины Ρ„Ρ€Π΅ΠΉΠΌΠ° ΠΏΠΎ Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ строки
right Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π΅Ρ‚ Ρ„Ρ€Π΅ΠΉΠΌ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ ΠΎΠΊΠ½Π°
texttop ВСрхняя Π³Ρ€Π°Π½ΠΈΡ†Π° Ρ„Ρ€Π΅ΠΉΠΌΠ° выравниваСтся ΠΏΠΎ самому высокому тСкстовому элСмСнту Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ строки
top ВСрхняя Π³Ρ€Π°Π½ΠΈΡ†Π° Ρ„Ρ€Π΅ΠΉΠΌΠ° выравниваСтся ΠΏΠΎ самому высокому элСмСнту Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ строки

ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ FRAMEBORDER

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π²ΠΎΠΊΡ€ΡƒΠ³ содСрТимого Ρ„Ρ€Π΅ΠΉΠΌΠ° рисуСтся Ρ€Π°ΠΌΠΊΠ° с эффСктом трСхмСрности. Π§Ρ‚ΠΎΠ±Ρ‹ Π΅Π΅ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ примСняСтся ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ frameborder. ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ значСния «yes (1)» ΠΈΠ»ΠΈ «no (0)».

ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ HEIGHT ΠΈ WIDTH

Π”Π°Π½Π½Ρ‹Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для измСнСния высоты ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Ρ„Ρ€Π΅ΠΉΠΌΠ°. Если Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ высоты ΠΈΠ»ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Π½Π΅ Π·Π°Π΄Π°Π½Ρ‹, Ρ‚ΠΎ Ρ„Ρ€Π΅ΠΉΠΌ автоматичСски ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ 300Ρ…150 пиксСлСй.

<iframe>…</iframe>

ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ HSPACE ΠΈ VSPACE

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ эти ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹, ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ отступ ΠΎΡ‚ ΠΊΡ€Π°Π΅Π² Ρ„Ρ€Π΅ΠΉΠΌΠ° Π΄ΠΎ ΠΎΠΊΡ€ΡƒΠΆΠ°ΡŽΡ‰Π΅Π³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ. Π’ качСствС значСния ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹ΡΡ‚ΡƒΠΏΠ°Ρ‚ΡŒ любоС Ρ†Π΅Π»ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ число Π² пиксСлях.

ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ NAME

Для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ пройдя ΠΏΠΎ ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ ссылкС Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ΠΉ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ Π²ΠΎ Ρ„Ρ€Π΅ΠΉΠΌ, для Π½Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ имя, опрСдСляСмоС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°.

<iframe name=»ΠΈΠΌΡ»>…</iframe>

ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ SCROLLING

Если содСрТимоС Ρ„Ρ€Π΅ΠΉΠΌΠ° Π½Π΅ помСщаСтся Π² ΠΎΡ‚Π²Π΅Π΄Π΅Π½Π½Ρ‹Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹, автоматичСски ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ для просмотра ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ. ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ полос ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° scrolling.
auto ΠŸΠΎΠ»ΠΎΡΡ‹ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ΡΡ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ автоматичСски, ΠΏΡ€ΠΈ нСобходимости *
no Π—Π°ΠΏΡ€Π΅Ρ‰Π°Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ полос ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ
yes ВсСгда Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ появлСниС полос ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ, нСзависимо ΠΎΡ‚ объСма ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ

ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ SRC

Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ адрСс Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒΡΡ Π²ΠΎ Ρ„Ρ€Π΅ΠΉΠΌ. Π’ качСствС значСния принимаСтся ΠΏΠΎΠ»Π½Ρ‹ΠΉ ΠΈΠ»ΠΈ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΡƒΡ‚ΡŒ ΠΊ Ρ„Π°ΠΉΠ»Ρƒ.

<iframe src=»URL»>…</iframe>

: элСмСнт встроСнного Ρ„Ρ€Π΅ΠΉΠΌΠ° — HTML: язык Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ гипСртСкста

HTML-элСмСнт

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚

Π›ΡŽΠ΄ΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΠ΅ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ чтСния с экрана, ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ title Π½Π°

Π‘Π΅Π· этого Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π²

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам »

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ «ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами» Π½ΠΈΠΆΠ΅.


ΠžΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΈ использованиС

Π’Π΅Π³

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам »

БвязанныС страницы

Π£Ρ‡Π΅Π±Π½ΠΎΠ΅ пособиС ΠΏΠΎ HTML: HTML-Ρ„Ρ€Π΅ΠΉΠΌΡ‹

Бсылка Π½Π° HTML DOM: ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ IFrame


Настройки CSS ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ

Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ элСмСнт