Как и когда использовать фреймы (встроенные фреймы)

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

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

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

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

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

  • srcdoc

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

    ЦСИ

    атрибут

  • песочница

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

  • бесшовный

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

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

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

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

  • Вместо того, чтобы использовать

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

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

    свойство

  • allowtransparency

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

    фон

    свойство сделать ифрам прозрачным

  • — вместо того, чтобы использовать
    граница

    Свойство CSS

  • MARGINHEIGHT

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

    поле

    свойство

  • MARGINWIDTH

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

    поле

    свойство

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

    свойство

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

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

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

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

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

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

  • С помощью
    переполнение

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

    прокрутки

    приписывать.

  • srcdoc

    ,

    песочница

    , а также

    бесшовный

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

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

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

или же

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

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

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

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

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

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

документ.

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

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

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

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

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

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

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

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

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

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

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

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

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

Ссылка на основную публикацию