Как и когда использовать IFrames

Встроенные фреймы позволяют вам включать контент из внешних источников на ваши страницы

Встроенные фреймы, обычно называемые просто «iframes», являются единственным типом фрейма, разрешенным в HTML5. Эти рамки по сути являются разделом вашей страницы, который вы «вырезали». В пространство, которое вы вырезали из страницы, вы можете затем подать на внешней веб-странице. По сути, iframe – это еще одно окно браузера, установленное прямо на вашей веб-странице. Вы видите кодовые фреймы, обычно используемые на веб-сайтах, которые должны включать внешний контент, такой как карта Google или видео с YouTube. Оба этих популярных сайта используют встраиваемый код iframe.

Как использовать элемент IFRAME

Элемент использует глобальные элементы HTML5, а также несколько других элементов. Четыре также являются атрибутами в HTML 4.01:

  • – URL для источника фрейма
  • – высота окна
  • – ширина окна
  • – название окна

И три новых в HTML5:

  •  srcdoc 

    – HTML-код источника фрейма. Этот атрибут имеет приоритет над любым URL в атрибуте

     src 
  •  sandbox 

    – список функций, которые следует разрешить или запретить в окне фрейма

  •  seamless 

    – сообщает пользовательскому агенту, что iframe должен отображаться так, как будто он невидимо является частью родительского документа

Чтобы создать простой iframe, вы устанавливаете исходный URL, ширину и высоту:

Обратите внимание, что вы можете не использовать значения пикселей для настроек вашего iframe, но вместо этого можете принять решение использовать процент. Если вы создаете адаптивный веб-сайт, размер которого должен меняться в зависимости от размера экрана, эти проценты будут важны.

Есть также некоторые атрибуты, которые действительны в HTML 4.01, но устарели в HTML5. Поскольку большинство веб-сайтов сегодня используют HTML5 +, эти атрибуты вы не захотите использовать (но вы можете увидеть их в некоторых старых документах).

  • Вместо этого используйте элемент
     A 

    для ссылки на описание

  • Вместо этого используйте свойство CSS

     float 
  •  allowtransparency 

    – вместо этого используйте свойство CSS

     background 

    , чтобы сделать ifram прозрачным

  • – вместо этого используйте CSS-свойство

     border 
  •  marginheight 

    – вместо этого используйте свойство CSS

     margin 
  •  marginwidth 

    – вместо этого используйте свойство CSS

     margin 
  • Вместо этого используйте свойство CSS

     overflow 

Поддержка браузера IFRAME

Элемент поддерживается всеми современными браузерами:

  • Android
  • Хром
  • Fire Fox
  • Internet Explorer 2+
  • iOS/Safari Mobile
  • Netscape 7+
  • Опера 3+
  • Сафари

Если в приведенном выше списке номер версии не указан, то это потому, что все версии этого браузера поддерживают его.

Следует помнить, что хотя все браузеры поддерживают

По-прежнему ограничена поддержка некоторых функций HTML5.

  • Использование
     overflow 

    для отключения прокрутки ненадежно. Если вы не хотите использовать полосы прокрутки в своих фреймах, вам следует продолжать использовать атрибут

     scrolling 

    .

  • Атрибуты

     srcdoc 

    ,

     sandbox 

    и

     seamless 

    в настоящее время не поддерживаются никакими браузерами.

Связывание с Iframes

Когда вы даете свои фреймы

или же

Затем вы можете указать свои ссылки на этот кадр с атрибутом на

элемент. Затем, когда пользователь нажимает на ссылку, она открывается внутри ссылочного iframe, а не в текущем окне.

Попробуй сам. Введите следующее на веб-странице:

Если документ открыт в

не имеет никакого

установить, тогда все эти ссылки будут открыты в том же фрейме, что и

документ.

Вы можете использовать эту функцию, чтобы сделать ссылки в одном

изменить содержимое другого

на той же странице.

IFrames и безопасность

Элемент сам по себе не является угрозой безопасности для вас или ваших читателей. К сожалению, у фреймов плохая репутация, поскольку они могут использоваться вредоносными веб-сайтами для включения контента, который может заразить компьютер посетителя, не видя его на странице. Это делается с помощью ссылки на невидимое

и эти сценарии выделяют вредоносный код. Пользователь щелкает ссылку и думает, что ссылка не работает, потому что ничего не произошло, но сценарий был запущен там, где он не мог его увидеть.

Есть также компьютерные вирусы, которые будут внедрять невидимые

в ваши веб-страницы, эффективно превращая ваш сайт в ботнет. Они могут сделать это через

и другие атаки.

Что нужно помнить при включении

на вашей веб-странице ваши пользователи находятся в такой же безопасности, как и содержимое всех сайтов, на которые вы ссылаетесь. Если у вас есть причина считать сайт ненадежным, не делайте на него ссылки ни в коем случае и, безусловно, не включайте его содержимое в

, Однако размещение ссылок на собственные страницы в рамках фреймов не создает угрозы безопасности для вас или ваших пользователей.

Оригинальная статья Дженнифер Крынин. Отредактированный 7/7/16 Джереми Жираром

Оцените статью
Solutics.ru
Добавить комментарий