Skip to main content

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

Курс по HTML5/CSS3. iframe. Часть 7 (Июнь 2026)

Курс по HTML5/CSS3. iframe. Часть 7 (Июнь 2026)
Anonim

Встроенные фреймы, обычно называемые «iframes», являются единственным типом фрейма, разрешенным в HTML5. Эти рамки представляют собой раздел вашей страницы, который вы «вырезаете». В том месте, которое вы вырезали на странице, вы можете подать на внешнюю веб-страницу. По сути, iframe - это другое окно браузера, установленное прямо внутри вашей веб-страницы. Вы seecode iframes, обычно используемые на веб-сайтах, которые должны включать внешний контент, такой как карта 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 фон свойства, чтобы сделать ifram прозрачным
  • Вместо этого используйте граница Свойство CSS
  • MARGINHEIGHTВместо этого используйте CSS поле имущество
  • MARGINWIDTHВместо этого используйте CSS поле имущество
  • Вместо этого используйте CSS переполнение имущество

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

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

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

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

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

  • С помощью переполнение отключить прокрутку не является надежным. Если вы не хотите использовать прокрутки в своих iframe, вы должны продолжать использовать прокрутки приписывать.
  • srcdoc, песочница, а также бесшовный В настоящее время атрибуты не поддерживаются никакими браузерами.

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

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

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

ID = "myIframe" src = "http://webdesign.about.com/#lp-main" height = "200px" width = "500px">

Это мой iframe

Когда вы нажмете эту ссылку, он откроет новый документ внутри указанного окна.

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

Вы можете использовать эту функцию для создания ссылок в одном IFRAME изменить содержимое другого IFRAME на той же странице.

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

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

Существуют также компьютерные вирусы, которые будут вводить невидимые IFRAME на ваши веб-страницы, эффективно превращая ваш сайт в бот-сеть. Они могут сделать это с помощью SQL-инъекций и других атак.

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

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