Объединение нескольких HTML-элементов для отображения на веб-странице
В контексте веб-браузера фрейм — это часть веб-страницы или окна браузера , которая отображает содержимое независимо от своего контейнера, с возможностью независимой загрузки содержимого. HTML или элементы мультимедиа во фрейме могут поступать с веб-сайта, отличного от сайта, предоставляющего вложенное содержимое. Эта практика, известная как фрейминг [1] , сегодня часто рассматривается как нарушение политики единого источника .
В HTML набор фреймов представляет собой группу именованных фреймов, на которые могут быть направлены веб-страницы и медиафайлы; iframe позволяет разместить фрейм внутри тела документа.
С начала 2000-х годов забота об удобстве использования и доступности привела к сокращению использования фреймсетов, а стандарт HTML5 их не поддерживает.
Теги и атрибуты
Рамки в HTML создаются с помощью <frameset></frameset>
пары тегов. <frameset>
Тег является контейнерным тегом для всех других тегов, которые используются для создания рамок. <frameset>
Тег заменяет <body>
тег в документах с фреймами. <frameset>
Тег определяет, как разделить окно на фреймы.
Каждый набор фреймов определяет набор строк или столбцов. Если пользователь определяет фреймы с помощью rows
атрибута, то создаются горизонтальные фреймы. Если пользователь определяет фреймы с помощью, cols
то создаются вертикальные фреймы.
Элемент <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 > Ваш браузер не поддерживает фреймы. <a href="http://www.example.com/frame_1.html"> Щелкните здесь </a> для просмотра кадра 1. <a href="http://alt.example.com/frame_2.html"> Щелкните здесь </a> для просмотра кадра 2. </noframes> </frameset>
Наборы фреймов имеют border
атрибут. Если установлено целое число больше 0, пользователь может изменять размер фреймов, перетаскивая эту границу, если только noresize
атрибут не присутствует в элементе фрейма. Если border установлено в 0, граница не будет отображаться, а содержимое в разных фреймах будет примыкать друг к другу без разграничения.
Элемент iframe
используется в строке в обычном теле HTML и определяет начальное содержимое и имя аналогично элементу frame
. Любой текст внутри <iframe></iframe>
пары тегов будет отображаться в браузерах, которые не понимают тег iframe.
< iframe src = "http://www.example.com/frame_1.html" height = "480" width = "640" > Ваш браузер не поддерживает iframes. < a href = "http://www.example.com/frame_1.html" > Щелкните здесь </ a > , чтобы просмотреть содержимое. </ iframe >
История
Netscape Navigator 2.0 представил элементы, используемые для фреймов, в марте 1996 года. Другие производители браузеров, такие как Apple с Cyberdog, последовали этому примеру позже в том же году. [2] В то время Netscape предложила фреймы Консорциуму Всемирной паутины (W3C) для включения в стандарт HTML 3.0. [3]
Фреймы использовались для отображения и навигации ранних онлайн-журналов и веб-приложений , таких как веб-почтовые службы и веб-чаты . Фреймы имели преимущество, позволяя отображать элементы по всему сайту без необходимости использования серверных функций, таких как включения на стороне сервера или поддержка CGI . Эти функции не были распространены на ранних веб-серверах, доступных для публики.
Ранние веб-сайты часто использовали рамку вверху для отображения баннера, который нельзя было прокрутить. Эти рамки баннера иногда включали логотип сайта, а также рекламу . [4]
XHTML 1.1, предполагаемый преемник HTML 4, удалил все фреймы. XFrames , предполагаемая окончательная замена, [5] предоставил составной URI для обращения к заполненному набору фреймов.
Более поздний стандарт HTML5 удалил наборы фреймов с помощью средств, отличных от XHTML. [6] Элемент iframe
остается с рядом опций « песочницы », предназначенных для обмена контентом между сайтами. [7]
Преимущества
Позволяя загружать контент и осуществлять навигацию по нему независимо, фреймы предлагали несколько преимуществ по сравнению с обычным HTML, который использовался на момент их первой разработки:
- Упрощение обслуживания контента, общего для всех или большинства страниц, например, навигационных данных. [8] Если элемент необходимо добавить в навигационное меню боковой панели, автору веб-страницы необходимо изменить только один файл веб-страницы, тогда как каждую отдельную страницу на традиционном веб-сайте без фреймов пришлось бы редактировать, если бы боковое меню отображалось на всех из них.
- Сокращение необходимой пропускной способности за счет отказа от повторной загрузки тех частей страницы, которые не были изменены.
- Позволяет просматривать несколько фрагментов информации рядом друг с другом, с возможностью прокручивать каждый раздел независимо. Это может включать сравнение двух изображений или видео рядом друг с другом или два разных способа понять что-либо, например, независимо прокручиваемую страницу текста рядом с видео, изображениями, анимацией, вращающимися 3D-объектами и т. д.
- Разрешить размещать сноски или отступления в специальном разделе страницы при наличии на них ссылок, чтобы читатель не терял свое место в основном тексте.
- Главное преимущество фреймов в том, что они позволяют частям страницы оставаться неподвижными, в то время как другие части прокручиваются. Это полезно для элементов, которые вы не хотите прокручивать, например, навигационные опции или баннерная реклама.
- Фреймы объединяют ресурсы, которые находятся на отдельных серверах. Например, вы можете использовать фреймы для объединения собственного материала (и навигационной графики) с созданным цепочкой обсуждений
[9]
Критика
Практика фрейминга HTML-контента вызвала многочисленные критические замечания, в основном касающиеся удобства использования и доступности . К ним относятся:
- Фрейминг нарушает идентичность между контентом и URL , отображаемым в браузере, что затрудняет создание ссылок или закладок для определенного элемента контента в пределах набора фреймов [10]
- Реализация фреймов в разных браузерах неодинакова [10]
- Браузеры, которые отображают материал линейно, плохо обрабатывают кадры. [11]
- Фрейминг затрудняет индексацию веб-страниц и может отрицательно сказаться на поисковой оптимизации . [13]
- Фрейминг стирает границы между контентом на разных серверах, [14] что поднимает вопросы нарушения авторских прав [15]
- Посетители, приходящие из поисковых систем, могут попасть на страницу, предназначенную для отображения во фрейме, в результате чего у посетителя не будет возможности перейти на остальную часть сайта [16]
- Кадры изменяют поведение кнопки «Назад». [16]
- Пользователи обычно не ожидают, что браузеры будут печатать кадры так, как они это делают. [15]
- Внешние ссылки на веб-страницах, использующих фреймы, могут привести к появлению других страниц в наборе фреймов, поскольку поведение по умолчанию для ссылки — загрузка в текущем фрейме, если автор не указал иное. Это может быть использовано недобросовестными веб-мастерами, чтобы создать видимость того, что контент с другого сайта на самом деле является частью сайта, на котором размещен набор фреймов.
- Если разрешение экрана или размер окна браузера слишком малы, то каждый фрейм будет иметь полосы прокрутки, которые могут выглядеть неряшливо и занимать и без того ограниченное пространство. Такое поведение обычно возникает из-за плохого дизайна сайта (фиксированные макеты вместо гибких макетов), в результате чего не все функции набора фреймов используются должным образом.
Это поведение можно смягчить следующими способами:- отключение прокрутки для небольших кадров, которым обычно не требуется полоса прокрутки;
- использование характеристик гибкого дизайна на целевых страницах вместо фиксированного дизайна, чтобы контент изначально не вызывал горизонтальных полос прокрутки.
Безопасность
Фреймы создают как технические, так и интерфейсные трудности для реализации политики одного и того же источника . В качестве примера последнего, внешняя страница может обманом заставить пользователя выполнить действие на внутренней странице (загруженной с помощью элемента iframe), которая была сделана на 99% прозрачной.
Альтернативы
С развитием веб-технологий многие из целей, для которых использовались фреймы, стали возможными способами, позволяющими избежать проблем, связанных с фреймами.
- Каскадные таблицы стилей (CSS) позволяют прокручивать элементы страницы независимо друг от друга (с помощью
overflow
свойства ) или удерживать их на экране, пока прокручивается остальное содержимое (с помощью position:fixed
). - Server-Side includes позволяли редактировать общий контент один раз и автоматически доставлять его клиенту как часть готовой страницы; по мере увеличения производительности ЦП сервера и скорости соединения дополнительная работа, необходимая для выполнения этой задачи на лету, становилась все менее важной.
- CGI и веб-ориентированные языки сценариев и фреймворки веб-разработки , такие как PHP и Active Server Pages , а также системы управления контентом на основе баз данных , такие как WordPress , предоставляют гораздо более широкие возможности для поддержки контента и обеспечения навигации.
- Клиентские скрипты и динамический HTML позволяли визуально заменять части страницы на основе действий пользователя. Это давало гораздо больше гибкости для отображения «стороннего» контента, такого как сноски или инструкции, поскольку теперь их можно было отображать и скрывать в любом месте страницы, а не требовать заранее определенного фрейма.
- AJAX позволяет динамически отображать контент на странице, даже если его необходимо извлечь с сервера, например, на основе вошедшего в систему пользователя или событий в другом месте.
Смотрите также
Ссылки
- ^ "Подключение к другим веб-сайтам". 2 апреля 2013 г.
Отличительной чертой фрейминга является то, что вместо того, чтобы направлять пользователя на связанный веб-сайт, информация с этого веб-сайта импортируется на исходную страницу и отображается в специальном "фрейме". Технически, когда вы просматриваете информацию в фрейме, ваш компьютер подключается к сайту, выполняющему фрейминг, а не к сайту, страница которого отображается во фрейме.
- ^ Гараффа, Дэйв (23 декабря 1996 г.). "Подарок от Apple: Cyberdog 2.0a1" (пресс-релиз). Internet.com . Архивировано из оригинала 17 августа 2000 г. Получено 14 апреля 2011 г.
- ^ Лэдд, Эрик. «Использование HTML 3.2, Java 1.1 и CGI; Гл. 13, Фреймы». Архивировано из оригинала 30 октября 2007 г.
- ^ Шафер, Дэн (1996). JavaScript и волшебство Netscape . Скоттсдейл, Аризона: Coriolis Group Books. стр. 31. ISBN 978-1-883577-86-5.
- ^ "Рабочий проект XFrames". W3C.
- ^ Отличия HTML5 от HTML4: «Следующие элементы отсутствуют в HTML5, поскольку их использование ухудшает удобство использования: frame, frameset, noframes»
- ^ Отличия HTML5 от HTML4: «Элемент iframe имеет новые атрибуты, называемые sandbox и srcdoc, которые позволяют изолировать контент, например комментарии блога».
- ^ «Наборы фреймов».
- ^ Робертс, Л, Джон. "CSS и SEO" . Получено 28 января 2022 г.
- ^ ab Нильсен, Якоб (декабрь 1996 г.). «Рамки — отстой в большинстве случаев».
- ^ "Should You Use Frames?". Учебник по HTML-коду. Архивировано из оригинала 6 августа 2016 г. Получено 7 апреля 2010 г.
- ^ "GEBoyd's How To Do Just About Anything by email – Часть 1". GeoCities . 11 августа 2000 г. Архивировано из оригинала 17 августа 2000 г. Получено 24 июня 2010 г.
- ^ Мур-Эдед, Пирс. "SEO основы 1". Lewes SEO . Получено 25 февраля 2012 г.
- ^ «Я ненавижу клуб Frames».
- ^ ab "Почему фреймы такие злые?".
- ^ ab «Плюсы и минусы фреймов на веб-страницах».
Внешние ссылки
- Справка HTML: Что не так с фреймами?
- Веб-советы Дэна: Фреймы
- Скрипт, разработанный для предотвращения фрейминга вашего контента