Другой тип фреймов - «классический» - требует наличия отдельной страницы, которая будет содержать описание структуры фреймов. Сами фреймы будут находиться в отдельных страницах , может даже на отдельных сайтах. HTML-код такой страницы-контейнера для фреймов может выглядеть так:
содержит атрибут rows - это означает, что пространство страницы должно быть поделено по вертикали и первому фрейму будет отдана верхняя часть . Если заменить rows на cols, то разделение будет горизонтальным. Значение этого атрибута "*,*" указывает, что пропорции разделения равны - по 50% каждому. Если указать, например "20%,*", то первому фрейму будет отдано только 20%, а остальное пространство - второму.Пользователь может сам изменять эти пропорции, перетаскивая границы фреймов мышкой, но есть возможность запретить это действие. Для этого в тег конкретного фрейма нужно добавить атрибут noresize. Можно также указать размеры отступов от соседнего фрейма по вертикали и горизонтали (атрибуты marginwidth и marginheight): Есть возможность задавать правила поведения для полос прокрутки каждого фрейма в отдельности. Для этого используется атрибут scrolling, который может содержать одно из трех предопределенных значений. Если указать scrolling="auto", то полосы прокрутки будут появляться когда содержимое фрейма не вмещается в его границы. Если "yes" - полосы будут присутствовать постоянно, независимо от наличия необходимости в них. Если "no" - это будет означать запрет полос прокрутки для этого фрейма. Исходя из информации, изложенной на двух предыдущих шагах, вам нужно сконструировать html-код, который более подходит для решения вашей задачи. После этого останется лишь вставить его в исходный код страницы. Для этого можно воспользоваться редактором страниц системы управления вашим сайтом - откройте в нем нужную страницу , переключите в режим редактирования html-кода и вставьте ваш код в нужное место страницы. А можно скачать файл исходного кода страницы файл-менеджером управления хостинга или системы управления сайтом, открыть его в текстовом редакторе и вставить код в нем. А затем тем же способом закачать измененный код обратно на сервер.
Элемент
Frames
Что же делает
Как вставить страницу в страницу HTML
? Для этого нужно использовать
Отображение
Display block.
Пример кода
Мощный, но легкий в использовании
Еще в старые недобрые времена веб-дизайна было много элементов, портящих жизнь каждого разработчика. Они почти всегда были плохим подходом к дизайну. К счастью, элемент был объявлен устаревшим в HTML5
. Но
Сходства и различия
Оба этих элемента позволяют создать отдельный HTML-документ
. Ссылка на содержимое документа, на который ссылается текущая веб-страница, указывается в атрибуте src
.
Основное различие между
Видео явно на HTML
странице, а не на какой-то отдельной панели. элемент сломал эту парадигму и позволил документу осуществлять контроль над окном браузера, разбив его на несколько мелких панелей (фреймов
), каждая из которых отображает отдельный документ. Все другие различия между и вытекают из этого основного различия.
Не переделывайте макеты на основе фреймов с помощью iframe
Когда-нибудь вам может попасться задача по обновлению старого сайта, который был построен с использованием фреймов. Возможно, вы захотите использовать и фиксированную ширину макета, чтобы воссоздать тот же кошмар из независимых панелей и подокон. Но вы не сможете использовать атрибут target
, чтобы открыть ссылку в отдельном фрейме. Вы можете начать искать решения на JavaScript
. Пожалуйста, не делайте этого.
Удачное (и ужасное) применение
Существует несколько допустимых вариантов использования для создания HTML
страницы:
встраивание стороннего медиа контента;
встраивание собственного медиа контента через кроссплатформенный документ;
встраивание примеров кода;
встраивание сторонних «апплетов
» в качестве форм оплаты.
А вот некоторые ужасные варианты использования :
Фотогалерея;
форум или чат.
Если вам нужно встроить независимые, уже существующие HTML-документы
в текущий, используйте . Если же вы строите все с нуля, нет никаких причин разбивать дизайн страницы на несколько самостоятельных документов. Особенно если они на самом деле не являются независимыми частями контента.
Атрибуты iframe
Название атрибута
Значение
Описание
sandbox
Allow-same-origin
Allow-top-navigation
Allow-forms
Allow-scripts
Задает ряд ограничений на контент, загружаемый во фрейм. Задается перед тем, как создать HTML страницу.
scrolling
yes no auto
Определяет показывать скроллы в фрейме или нет. Является устаревшим в HTML5. Вместо него используйте CSS.
Name
название
Задает имя фрейма.
Align
left right top
middle bottom
Определяет выравнивание фрейма относительно окружающих элементов. Является устаревшим. Вместо него используйте CSS.
frameborder
yes (или 1)
no
Используется для включения отображения границы вокруг фрейма. Является устаревшим в HTML5. Вместо него используйте CSS.
longdesc
URL
Используется, чтобы указать URL-адрес страницы, которая содержит длинное описание содержания фрейма. Является устаревшим. Вместо него используйте CSS.
marginwidth
пиксели
Используется для контроля ширины отступа от содержания до границы фрейма. Является устаревшим. Вместо него используйте CSS.
src
URL
Определяет URL-адрес документа для отображения в IFRAME.
vspace
пиксели
Устанавливает вертикальные отступы от фрейма до окружающего контента. Является устаревшим. Вместо него используйте CSS.
width
пиксели %
Определяет ширину фрейма на HTML странице .
Данная публикация представляет собой перевод статьи «
» , подготовленной дружной командой проекта
Фреймы — это HTML-элементы, позволяющие разделить окно веб-браузера на несколько независимых окон, в каждое из которых можно загрузить отдельный HTML-документ. Каждое такое окно (фрейм) может иметь собственные полосы прокрутки и функционировать независимо от других независимых окон либо наоборот управлять их содержанием. Они могут применяться для организации постоянно находящегося в одном окне меню, в то время как в другом окне располагается непосредственно сама информация. Пользователи могут обращаться к меню в любой момент, и им не нужно возвращаться к предыдущей странице, чтобы выбрать другой пункт меню. Применение фреймов позволит вам «закрепить» в окне браузера изображения или другие неподвижные по замыслу элементы интерфейса, в то время как остальная часть страницы будет прокручиваться во фрейме.
Однако, стоит отметить, что в наши дни фреймы считаются устаревшим средством, а сайты с фреймами теперь считаются несолидными, так как профессиональные веб-мастера никогда не используют фреймы в своих проектах. С фреймами связан целый ряд печально известных проблем. Они, например, сбивают с толку поисковые машины, поскольку на страницах, которые содержат контент, нет ссылок на другие документы. Если вы хотите получать посетителей с поисковых систем , забудьте о фреймах. Понравившуюся страницу пользователю невозможно поместить в раздел закладки браузера, так как фреймы скрывают адрес страницы, на которой он находится, и всегда показывают только адрес веб-сайта. По этой причине они создают проблемы для браузеров при отслеживании хронологии и еще они не слишком приспособлены для разных размеров экранов и мобильных устройств.
Несмотря на то, что проекты с фреймами встречаются во всемирной паутине все реже, изучение HTML было бы неполным без рассмотрения темы о фреймах. У фреймов наряду с недостатками есть и некоторые достоинства, которые не позволяют отбросить эту технологию как бесперспективную.
Создание фреймов
Структура HTML-документа с фреймами внешне очень напоминает формат обычного HTML-документа. Как и в обычном HTML-документе, весь код помещен между парными тегами
и
, а в контейнере
располагаются заголовки. Основное отличие документа с фреймами от обычного HTML-документа — у документа с фреймами вместо тега
применяется парный тег
(от англ. frame set – набор фреймов).
В следующем примере приведена структура HTML-документа с фреймами:
Пример: Структура HTML-документа с фреймами
frame_top
frame_left
frame_right
Документ с фреймами
В приведенном примере страница содержит три области, в каждую из которых первоначально загружаются HTML-документы frame_top.html, frame_left.html и frame_right.html. Помимо HTML-документов, фрейм может содержать и графику. Для этого необходимо указать адрес соответствующего изображения в атрибуте src
, например src="image.gif"
. Обратите внимание, что элемент
используется без закрывающего тега.
Внутри контейнера
могут содержаться только теги
или другой набор фреймов, охваченный тегами
и
.
Тег
имеет следующие атрибуты:
rows
— описывает разбиение страницы на строки:
cols
— описывает разбиение страницы на столбцы:
Области, полученные в результате такого разбиения страницы, и будут являться фреймами. Отсутствие этих атрибутов определяет один фрейм, который займет все окно браузера.
В значении атрибутов rows
и cols
необходимо указывать не количество строк или столбцов, а значение ширины и высоты фреймов. Все значения в списке разделяются запятыми. Размеры могут быть указаны в абсолютных единицах (в пикселах) или в процентах:
cols="20%, 80%"
— окно браузера разбивается на две колонки с помощью атрибута cols
, левая колонка занимает 20%, а правая 80% окна браузера.
rows="100, *"
окно браузера разбивается на два горизонтальных окна с помощью атрибута rows
, верхнее окно занимает 100 пикселов, а нижнее — оставшееся пространство, заданное символом звездочки.
Как видно из данного примера , контейнер
с атрибутом rows
вначале создает два горизонтальных фрейма, а вместо второго фрейма подставляется еще один
, который разбивает нижний горизонтальный фрейм на две колонки с помощью атрибута cols
, левая колонка занимает занимает 20%, а правая 80% окна браузера.
Если браузер не поддерживает фреймы, то в окне будет отображен текст, расположенный между тегами
и
. Все, что находится между тегами
и
, игнорируется браузерами, поддерживающими фреймы. Таким образом разработчику нужно написать код, дублирующий содержимое фреймов другими средствами, и поместить этот код в контейнер
, тогда все пользователи смогут увидеть его веб-страницу.
Как уже отмечалось, для вставки в документ отдельного фрейма служит непарный тег
. Атрибут src
задает документ, который должен отображаться внутри данного фрейма, например: . Если атрибут src
отсутствует, отображается пустой фрейм.
Границы или пространство между фреймами
По умолчанию, браузер отображает серую и, как правило, в виде трехмерной линии границу между фреймами, с помощью которой посетители могут регулировать размер фрейма.
Границей фрейма можно управлять, как и любыми другими элементами фрейма. Для этого существует несколько атрибутов элемента
, позволяющих настраивать границы фреймов. Толщина линии границы определяется атрибутом border
. По умолчанию значение толщины границы равно пяти.
Чтобы скрыть границу фрейма, необходимо либо указать значение ширины границы равным нулю, либо присвоить значение «no» или «0» атрибуту frameborder
. Атрибут frameborder
может принимать только два противоположных значения. Если значение атрибута frameborder
равно «yes» или «1», то граница фреймов будет отображаться, а если «0» или «no», то нет. Учтите, что значения атрибута frameborder
различаются для разных браузеров . Чтобы решить эту проблему используйте дважды атрибут frameborder
, а для некоторых браузеров требуется еще добавить атрибут framespacing
со значением «0»:
В следующем примере убираем границу между фреймами:
Пример: Убираем границу между фреймами
Фреймы без границ
Если вы удалите границу между фреймами, посетители не смогут изменять размер фрейма в браузере. Вы можете также не допустить изменения размера фрейма, сохранив границы, используя атрибут noresize
:
С помощью атрибута bordercolor
можно изменить цвет границы фрейма, необходимо только указать код или соответствующее зарезервированное имя цвета.
Ниже приведен пример html-страницы, которая содержит описанные выше атрибуты управления границей фрейма: цвет границы — красный, изменять размер верхнего фрейма нельзя:
Пример: Управление границей фреймов
frame_top
frame_left
frame_right
Управление границей фреймов
Если вы хотите расположить страницу, отображаемую внутри фрейма, ближе к его границам, или, наоборот, отодвинуть дальше, измените атрибуты marginheight
и marginwidth
тэга
. Атрибут marginheight
определяет отступ между содержимым фрейма и его верхней и нижней границами. Синтаксис:
Атрибут marginwidth
определяет отступ между содержимым фрейма и его правой и левой границами. Синтаксис:
Данная строка html , например, располагает отображаемую страницу вплотную к границе фрейма:
Если страница отображает нежелательную для вас полосу прокрутки, вы можете решить эту проблему, указав атрибут scrolling
="no" в тэге
. Но учтите, что если фрейм будет недостаточно большим, чтобы отобразить все содержимое страницы, то у посетителя не будет никакой возможности прокрутить отображаемую страницу.
Ссылки внутри фреймов
Переход по ссылке в обычном HTML-документе осуществляется следующим образом: нажимаете ссылку и текущий документ заменяется новым в текущем либо в новом окне браузера. При использовании фреймов схема загрузки html-документов отличается от обычной и главное отличие — это возможность загружать html-документ в один фрейм из другого фрейма.
Для загрузки документа в определенный фрейм используется атрибут target
тега
. В качестве значения атрибута target
используется имя фрейма, в который будет загружаться документ, указанный атрибутом name
тега
. Стоит также отметить, что имя фрейма должно начинаться либо с цифры либо с латинской буквы. Следующие имена используются в качестве зарезервированных:
Для внешних ссылок следует задавать в качестве значения для атрибута target либо _top , либо _blank , для того, чтобы сторонние проекты отображались не в ваших фреймах, а занимали полное окно браузера.
В следующем примере изображен HTML-документ, в правый фрейм которого загружается страница по ссылке, помещенной в верхний фрейм. Ссылка на документ, который откроется в правом фрейме:
Google
Правому фрейму присваивается имя frame_right
:
Чтобы документ загружался в указанный фрейм, используется конструкция target="frame_right"
, как показано в примере:
Пример: Ссылка на другой фрейм
Ссылка на другой фрейм
Ваш браузер не отображает фреймы
Плавающие фреймы
Элемент
(сокращение английского термина «плавающий фрейм») позволяет встроить в любое место веб-страницы отдельный HTML-документ или другой ресурс.
Содержимым плавающего (встроенного) фрейма может быть любая НТМL-страница, как с вашего ресурса, так и с другого веб-сайта. Как вы уже поняли, плавающие фреймы создаются с помощью элемента
, который в отличие от тега
вставляется не между тегами
и
, а между тегами
и
.
В элементе
можно использовать те же атрибуты, что и для фрейма
, за исключением атрибута noresize
— в отличие от обычных фреймов, для встроенных фреймов возможность изменения размеров на экране не предусмотрена:
Атрибут
Описание
src
используется для указания URL-aдpeca страницы, отображаемой во фрейме
height
устанавливает высоту окна плавающего фрейма в пикселах или %
width
устанавливает ширину окна плавающего фрейма в пикселах или %
name
имя фрейма, по которому к нему можно будет обращаться в ссылках
frameborder
задает обрамление у фреймов, может принимать значения 1 (есть обрамление) или 0 (нет об-рамления) (В HTML5 не поддерживается
)
marginwidth
отступ слева и справа от содержания до границы фрейма (В HTML5 не поддерживается
)
marginheight
отступ сверху и снизу от содержания до границы фрейма (В HTML5 не поддерживается
)
scrolling
определяет вид полос прокрутки у фрейма и принимает значения yes (есть полосы), no (нет полос) и auto (полосы появляются при необходимости) (В HTML5 не поддерживается
)
allowfullscreen
разрешает для фрейма полноэкранный режим
hspace
Горизонтальный отступ от фрейма до окружающего контента
vspace
вертикальный отступ от фрейма до окружающего контента
align
определяет выравнивание фрейма
В следующем примере размеры плавающего фрейма заданы в пикселях, однако вы можете задавать их и в %:
Одним из наиболее частых способов заражения компьютера посетителей сайтов является использование уязвимости, связанной с переполнением буферов браузеров пользователей. Рецепт достаточно прост. Злоумышленники внедряют вредоносный код вставкой iframe на страницы сайта и пытаются загрузить на компьютер ничего не подозревающего пользователя вредоносные файлы. Обнаружить подобные вредоносные врезки на ваших сайтах достаточно легко. Стоит лишь обратить внимание на фрагменты кода, в которых используется подключение iframe. Такие вставки могут быть как в HTML, так и в PHP файлах.
Злоумышленники почти всегда пытаются максимально скрыть от владельцев использование вредоносных ставок, скрывая их визуально для пользователей ресурса и обфусцируя (запутывая) свой код.
Скрытие iframe вставок от глаз пользователей
Для маскировки вредоносной вставки хакеры в большинстве случаев применяют один и тот же метод раз за разом - выставляют свойства тега так, чтобы он не отображался на странице, но содержался в ее коде. Чаще всего, выставляется нулевая или однопикселевая ширина и длина: width="1px", height="1px".
Например, вредоносный код может выглядеть так:
Однако, часто такой маскировкой хакеры не ограничиваются, дополняя сокрытие более изощренными приемами, способными сбить с толку и усложнить поиск и устранение даже продвинутым программистам.
Обфускация
Это один из наиболее часто встречаемых способов защиты кода в программировании на неструктурированных языках (таких, как, например, PHP). Фактически, все шифрование заключается в самом перепутывании/запутывании кода за счет изменения имен переменных и других элементов. Как результат - распознать признаки вредоносности в запутанном коде достаточно тяжело и возможно лишь по косвенным признакам использования в явном виде специальных JS (JavaScript) функций, используемых как раз для обфускации: unescape
, fromCharCode
.
Однако, обнаружение обфусцированного кода на сайте не означает однозначной его вредоносности или легкости устранения. Нужно понимать, что, во-первых, злоумышленники могли обфусцировать код, захватив еще и часть рабочего кода сайта. В таком случае, при попытке вырезания зашифрованного фрагмента вы рискуете обрушить ваш ресурс. Во-вторых, обфусцированный код может не быть вредоносным, а лишь являться следствием работы вашей CMS или отдельных ее компонентов, а также, установленных вами дополнительных модулей.
В любом случае, если вы столкнулись с подозрительным обфусцированным кодом, нужно действовать с максимальной аккуратность.
Прочие признаки заражения
Если вы сомневаетесь, является ли найденный вами код вредоносным, то можно попробовать проанализировать косвенные признаки. При наличии большого числа файлов на вашем сайте, вы можете обратить внимание на дату и время последнего изменения файлов. В случае, если вы хорошо знаете сценарии работы своей CMS с файлами, то можете присмотреться к файлам, измененным в одну дату в одно и то же время, или с изменениями, идущими с одинаковым интервалом времени, например, 1 секунда.
В случае, если вы являетесь продвинутым программистом, то можете написать скрипт, проверяющий наличии обнаруженного вами типа вставок на всех файлах вашего сайта. Если вы еще более продвинуты - можете заставить скрипт вырезать вставки, однако, всегда нужно быть аккуратным.
Альтернативные методы
Мы рекомендуем вам использовать сервис Вирусдай для удаления вредоносных вставок на даже в тех случаях, когда вы являетесь продвинутым специалистом. Наш сервис не только содержит множество сигнатур, по которым находит вредоносные коды, но и экономит время! К тому же, стоимость использования Вирусдая для чистки будет, вероятно, намного ниже, чем оплата вашего же рабочего времени. Вы сможете обнаружить и удалить не только iframe вставки, но и множество других угроз. Вероятно, вы сможете найти и автоматически удалить угрозу, приведшую к появлению iframe вставок на вашем сайте, такую, как, например, Шелл.
Команда сервиса Вирусдай.