Объединение нескольких элементов 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
атрибут не присутствует в элементе фрейма. Если для границы установлено значение 0, граница отображаться не будет, а содержимое в разных кадрах будет примыкать друг к другу без разграничения.
Элемент iframe
используется внутри обычного тела HTML и определяет исходное содержимое и имя аналогично элементу frame
. Любой текст внутри <iframe></iframe>
пары тегов будет отображаться в браузерах, которые не понимают тег iframe.
< iframe src = "http://www.example.com/frame_1.html" height = "480" width = "640" > Ваш браузер не поддерживает iframe. < a href = "http://www.example.com/frame_1.html" > Нажмите здесь </ a > , чтобы просмотреть содержимое. </ 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]
- Фрейминг усложняет веб-индексацию и может нанести ущерб поисковой оптимизации . [13]
- Кадрирование стирает границы между контентом на разных серверах, [14] что поднимает вопросы нарушения авторских прав [15]
- Посетители, пришедшие из поисковых систем, могут попасть на страницу, предназначенную для отображения во фрейме, в результате чего у посетителя не будет возможности перейти к остальной части сайта [16].
- Рамки меняют поведение кнопки «Назад». [16]
- Пользователи обычно не ожидают, что браузеры будут печатать кадры так, как они. [15]
- Внешние ссылки на веб-страницах, использующих фреймы, могут привести к появлению других страниц в наборе фреймов, поскольку поведением ссылки по умолчанию является загрузка в текущем фрейме, если автор не указал иное. Это может быть использовано недобросовестными веб-мастерами, чтобы создать впечатление, будто контент с другого сайта на самом деле является частью сайта, на котором размещен набор фреймов.
- Если разрешение экрана или размер окна браузера слишком малы, в каждом кадре будут полосы прокрутки, которые могут выглядеть беспорядочно и занимать и без того ограниченное пространство. Такое поведение обычно было результатом плохого дизайна сайта (фиксированные макеты вместо гибких макетов), в результате чего не все функции набора фреймов использовались должным образом.
Такое поведение можно смягчить следующими способами:- отключение прокрутки для небольших кадров, для которых обычно не требуется полоса прокрутки;
- использование гибких характеристик дизайна на целевых страницах вместо фиксированных дизайнов, чтобы контент вообще не вызывал горизонтальные полосы прокрутки.
Альтернативы
По мере развития веб-технологий многие цели, для которых использовались фреймы, стали возможными способами, позволяющими избежать проблем, связанных с фреймами.
- Каскадные таблицы стилей (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 г.
- ^ «Я ненавижу клуб Frames».
- ^ ab «Почему кадры такие злые?».
- ^ ab «Плюсы и минусы фреймов на веб-страницах».
Внешние ссылки
- Справка по HTML: Что не так с фреймами?
- Веб-советы Дэна: фреймы
- Скрипт, предназначенный для предотвращения кадрирования вашего контента