Рамка (Всемирная паутина)

В контексте веб-браузера фрейм — это часть веб-страницы или окна браузера , которая отображает контент независимо от его контейнера, с возможностью независимой загрузки контента. Элементы HTML или мультимедиа во фрейме могут поступать с веб-сайта, отличного от сайта, предоставляющего включающий контент. Эта практика, известная как фрейминг , ^[1] сегодня часто рассматривается как нарушение политики одного и того же происхождения .

В HTML набор фреймов — это группа именованных фреймов, к которым могут быть направлены веб-страницы и мультимедиа; iframe позволяет разместить фрейм внутри тела документа.

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

Теги и атрибуты

Фреймы в HTML создаются с помощью <frameset></frameset> пара тегов. <frameset> tag — это тег-контейнер для всех остальных тегов, которые используются для создания кадров. <frameset> тег заменяет <body> тег в документах набора фреймов. <frameset> Тег определяет, как разделить окно на фреймы.

Каждый набор фреймов определяет набор строк или столбцов. Если пользователь определяет кадры с помощью rows атрибут, то создаются горизонтальные рамки. Если пользователь определяет кадры с помощью cols затем создаются вертикальные рамки.

The <noframes> элемент может быть включен, чтобы веб-браузеры с отключенными фреймами (или браузеры, которые не поддерживают фреймы) могли отображать что-то пользователю, как в этом примере:

<frameset cols="85%, 15%">
  <frame src="http://www.example.com/frame_1.html" name="frame_1">
  <frame src="http://alt.example.com/frame_2.html" name="frame_2">
  <noframes>
    Your browser does not support frames. 
    <a href="http://www.example.com/frame_1.html">Click here</a> to view frame 1. 
    <a href="http://alt.example.com/frame_2.html">Click here</a> for frame 2.
  </noframes>
</frameset>

Наборы фреймов имеют border атрибут. Если установлено целое число больше 0, пользователь может изменить размер кадров, перетаскивая эту границу, если только noresize Атрибут присутствует в элементе кадра. Если для границы установлено значение 0, граница отображаться не будет, а содержимое в разных кадрах будет примыкать друг к другу без разграничения.

The iframe Элемент используется внутри обычного тела HTML и определяет исходное содержимое и имя аналогично элементу frame элемент. Любой текст внутри <iframe></iframe> пара тегов будет отображаться в браузерах, которые не понимают тег iframe.

<iframe src="http://www.example.com/frame_1.html" height="480" width="640">
    Your browser does not support iframes. <a href="http://www.example.com/frame_1.html">Click here</a> to view the content.
</iframe>

История

Netscape Navigator 2.0 представил элементы, используемые для фреймов, в марте 1996 года. Другие поставщики браузеров, такие как Apple с Cyberdog, последовали их примеру позже в том же году. ^[2] В то время Netscape предложила Консорциуму World Wide Web (W3C) фреймы для включения в стандарт HTML 3.0. ^[3]

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

Ранние веб-сайты часто использовали рамку вверху для отображения баннера, который нельзя было прокрутить. Эти рамки баннеров иногда включали логотип сайта, а также рекламу . ^[4]

В XHTML 1.1, предполагаемом преемнике HTML 4, были удалены все фреймы. XFrames , предполагаемая возможная замена, ^[5] предоставил составной URI для обращения к заполненному набору кадров.

Более поздний стандарт HTML5 удалил наборы фреймов способами, отличными от XHTML. ^[6] iframe элемент остается с рядом опций « песочницы », предназначенных для обмена контентом между сайтами. ^[7]

Преимущества

Позволяя независимо загружать контент и перемещаться по нему, фреймы предлагали несколько преимуществ по сравнению с простым HTML, который использовался при их первой разработке:

Упрощение обслуживания контента, общего для всех или большинства страниц, например навигационных данных. ^[8] Если элемент необходимо добавить в навигационное меню боковой панели, автору веб-страницы необходимо изменить только один файл веб-страницы, тогда как на традиционном веб-сайте без набора фреймов каждую отдельную страницу придется редактировать, если боковое меню появится на всех их.
Уменьшение необходимой пропускной способности за счет отказа от повторной загрузки частей страницы, которые не изменились.
Возможность одновременного просмотра нескольких фрагментов информации с возможностью независимой прокрутки каждого раздела. Это может включать параллельное сравнение двух изображений или видео или два разных способа понять что-либо, например независимую прокрутку страницы текста рядом с видео, изображениями, анимацией, вращающимися трехмерными объектами и т. д.
Разрешение появления сносок или отступлений в выделенном разделе страницы при ссылке, чтобы читатель не потерял свое место в основном тексте.

^[9]

Критика

Практика создания HTML-контента вызвала многочисленные критические замечания, в основном связанные с удобством использования и доступностью . К ним относятся:

Фреймирование нарушает идентичность между содержимым и URL-адресом , отображаемым в браузере, что затрудняет создание ссылки на определенный элемент контента или добавление его в закладки в наборе фреймов. ^[10]
Реализация фреймов неодинакова в разных браузерах. ^[10]
Браузеры, которые отображают материал линейно, плохо обрабатывают кадры. ^[11]
- чтения с экрана Программы
- текстовые или аудиобраузеры
- Браузеры электронной почты, такие как Agora ^[12]
- Мобильные браузеры
Фрейминг усложняет веб-индексацию и может нанести ущерб поисковой оптимизации . ^[13]
Кадрирование стирает границы между контентом на разных серверах, ^[14] который поднимает вопросы нарушения авторских прав ^[15]
Посетители, пришедшие из поисковых систем, могут попасть на страницу, предназначенную для отображения во фрейме, в результате чего у посетителя не будет возможности перейти к остальной части сайта. ^[16]
Рамки меняют поведение кнопки «Назад». ^[16]
Пользователи обычно не ожидают, что браузеры будут печатать кадры так, как они. ^[15]
Внешние ссылки на веб-страницах, использующих фреймы, могут привести к появлению других страниц в наборе фреймов, поскольку поведением ссылки по умолчанию является загрузка в текущем фрейме, если автор не указал иное. Это может быть использовано недобросовестными веб-мастерами, чтобы создать впечатление, будто контент с другого сайта на самом деле является частью сайта, на котором размещен набор фреймов.
Если разрешение экрана или размер окна браузера слишком малы, в каждом кадре будут полосы прокрутки, которые могут выглядеть беспорядочно и занимать и без того ограниченное пространство. Такое поведение обычно было результатом плохого дизайна сайта (фиксированные макеты вместо гибких макетов), в результате чего не все функции набора фреймов использовались должным образом.
Такое поведение можно смягчить следующими способами:
- отключение прокрутки для небольших кадров, для которых обычно не требуется полоса прокрутки;
- использование гибких характеристик дизайна на целевых страницах вместо фиксированных дизайнов, чтобы контент вообще не вызывал горизонтальные полосы прокрутки.

Безопасность

Фреймы создают как технические трудности, так и трудности с пользовательским интерфейсом для обеспечения соблюдения политики одного и того же происхождения . В качестве примера последнего можно привести внешнюю страницу, которая может обманом заставить пользователя выполнить действие на внутренней странице (загруженной с помощью элемента iframe), которая стала прозрачной на 99%.

Альтернативы

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

Каскадные таблицы стилей (CSS) позволяли независимо прокручивать элементы страницы (с помощью overflow свойство) или удерживаться на экране во время прокрутки другого содержимого (с помощью position:fixed)
Серверные включения позволяли один раз редактировать общий контент и автоматически доставлять его клиенту как часть готовой страницы; по мере увеличения скорости процессора сервера и скорости соединения дополнительная работа, необходимая для выполнения этого на лету, стала менее важной.
CGI и веб-ориентированные языки сценариев и среды веб-разработки , такие как PHP и Active Server Pages , а также системы управления контентом на основе баз данных , такие как WordPress , предоставили гораздо более широкие возможности для поддержки контента и обеспечения навигации.
Сценарии на стороне клиента и динамический HTML позволяли визуально заменять части страницы в зависимости от действий пользователя. Это позволило гораздо больше гибкости при отображении «побочного» контента, такого как сноски или инструкции, поскольку теперь их можно было отображать и скрывать в любом месте страницы, а не требовать заранее определенного фрейма.
AJAX допускает динамическое отображение контента на странице, даже если его необходимо получить с сервера, например, на основе вошедшего в систему пользователя или событий в другом месте.

См. также

Ссылки

^ «Подключение к другим веб-сайтам» . 2 апреля 2013 г. Отличие фрейминга заключается в том, что вместо перехода пользователя на связанный веб-сайт информация с этого веб-сайта импортируется на исходную страницу и отображается в специальном «фрейме». Технически, когда вы просматриваете информацию во фрейме, ваш компьютер подключен к сайту, выполняющему фрейм, а не к сайту, страница которого отображается во фрейме.
^ Гараффа, Дэйв (23 декабря 1996 г.). «Подарок от Apple: Cyberdog 2.0a1» (Пресс-релиз). Интернет.com . Архивировано из оригинала 17 августа 2000 года . Проверено 14 апреля 2011 г.
^ Лэдд, Эрик. «Использование HTML 3.2, Java 1.1 и CGI; глава 13, Фреймы» . Архивировано из оригинала 30 октября 2007 года.
^ Шафер, Дэн (1996). Мастерство JavaScript и Netscape . Скоттсдейл, Аризона: Книги Кориолиса. стр. 31 . ISBN 978-1-883577-86-5 .
^ «Рабочий проект XFrames» . W3C.
^ Отличия HTML5 от HTML4 : «Следующих элементов нет в HTML5, поскольку их использование ухудшает удобство использования: фрейм, набор фреймов, noframes»
^ Отличия HTML5 от HTML4 : «Элемент iframe имеет новые атрибуты, называемые песочницей и srcdoc, которые позволяют помещать в песочницу контент, например комментарии в блогах».
^ «Наборы фреймов» .
^ Робертс, Л., Джон. «CSS и SEO» . Проверено 28 января 2022 г.
^ Перейти обратно: ^а ^б Нильсен, Якоб (декабрь 1996 г.). «Рамки в большинстве случаев отстой» .
^ «Следует ли использовать фреймы?» . Учебник по HTML-коду. Архивировано из оригинала 6 августа 2016 года . Проверено 7 апреля 2010 г.
^ «Как сделать что угодно по электронной почте от GEBoyd - Часть 1» . ГеоГорода . 11 августа 2000 года. Архивировано из оригинала 17 августа 2000 года . Проверено 24 июня 2010 г.
^ Мур-Эдед, Пирс. «Основы SEO 1» . Льюис SEO . Проверено 25 февраля 2012 г.
^ «Я ненавижу клуб «Рамки» .
^ Перейти обратно: ^а ^б «Почему фреймы такие злые?» .
^ Перейти обратно: ^а ^б «Плюсы и минусы фреймов на веб-страницах» .

Внешние ссылки

[1] «Подключение к другим веб-сайтам» . 2 апреля 2013 г. Отличие фрейминга заключается в том, что вместо перехода пользователя на связанный веб-сайт информация с этого веб-сайта импортируется на исходную страницу и отображается в специальном «фрейме». Технически, когда вы просматриваете информацию во фрейме, ваш компьютер подключен к сайту, выполняющему фрейм, а не к сайту, страница которого отображается во фрейме.

[2] Гараффа, Дэйв (23 декабря 1996 г.). «Подарок от Apple: Cyberdog 2.0a1» (Пресс-релиз). Интернет.com . Архивировано из оригинала 17 августа 2000 года . Проверено 14 апреля 2011 г.

[3] Лэдд, Эрик. «Использование HTML 3.2, Java 1.1 и CGI; глава 13, Фреймы» . Архивировано из оригинала 30 октября 2007 года.

[4] Шафер, Дэн (1996). Мастерство JavaScript и Netscape . Скоттсдейл, Аризона: Книги Кориолиса. стр. 31 . ISBN 978-1-883577-86-5 .

[5] «Рабочий проект XFrames» . W3C.

[6] Отличия HTML5 от HTML4 : «Следующих элементов нет в HTML5, поскольку их использование ухудшает удобство использования: фрейм, набор фреймов, noframes»

[7] Отличия HTML5 от HTML4 : «Элемент iframe имеет новые атрибуты, называемые песочницей и srcdoc, которые позволяют помещать в песочницу контент, например комментарии в блогах».

[8] «Наборы фреймов» .

[9] Робертс, Л., Джон. «CSS и SEO» . Проверено 28 января 2022 г.

[Nielsen1996-10] Перейти обратно: ^а ^б Нильсен, Якоб (декабрь 1996 г.). «Рамки в большинстве случаев отстой» .

[11] «Следует ли использовать фреймы?» . Учебник по HTML-коду. Архивировано из оригинала 6 августа 2016 года . Проверено 7 апреля 2010 г.

[geboyd-12] «Как сделать что угодно по электронной почте от GEBoyd - Часть 1» . ГеоГорода . 11 августа 2000 года. Архивировано из оригинала 17 августа 2000 года . Проверено 24 июня 2010 г.

[13] Мур-Эдед, Пирс. «Основы SEO 1» . Льюис SEO . Проверено 25 февраля 2012 г.

[14] «Я ненавижу клуб «Рамки» .

[htmlfaq-15] Перейти обратно: ^а ^б «Почему фреймы такие злые?» .

[prosandcons-16] Перейти обратно: ^а ^б «Плюсы и минусы фреймов на веб-страницах» .

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]

[13]

[14]

[15]

[16]