Фреймы.
Решение проблемы адресной строки.
Третьяков
М.Ю., Тимофеев
И.Ю.
Компания
ключ
Key Company
Резюме
В статье дается общее решение проблемы адресной строки, возникающей
при использовании фреймов. Проблема заключается в том, что
при навигации по такому сайту, адресная строка в браузере
не меняется. Это, в свою очередь, приводит к целому ряду дополнительных
проблем: открытие внутренних страниц происходит без воссоздания
общей структуры всех фреймов, нельзя сохранить ссылку на конкретную
страницу сайта. Кроме общего решения проблемы также предлагаются
два способа реализации: на стороне клиента и на стороне сервера.
Содержание
Введение
Общий способ решения
Реализация на стороне клиента
Реализация на стороне сервера
Заключение
Введение
Использование фреймов позволяет структурировать представление
информации в окне браузера, делая возможным размещение общих
элементов сайта (меню, заголовок, содержание) в отдельных
фреймах. Такой подход имеет ряд преимуществ: наличие по одному
файлу на каждый общий элемент, ускоренная загрузка страниц
сайта, т.к. общие элементы загружаются только один раз. Но,
также, и ряд недостатков. К ним можно отнести и такую проблему,
как проблема адресной строки.
В
чем же заключается проблема адресной строки?
При
использовании фреймов на сайте существует обычно одна страница,
которая задает общую структуру, указывая, где и каким образом
будут размещаться другие фреймы. Эта страница загружается
первой и затем не изменяется. Все переходы пользователя со
страницы на страницу сайта происходят внутри других фреймов.
Таким образом, пользователь в адресной строке всегда видит
только путь к начальной странице, который не изменяется при
переходах.
К
чему приводит проблема адресной строки?
Во-первых,
неизменность адресной строки приводит в замешательство пользователя,
т.к. он не может из адреса получить информацию о том, где
он сейчас реально находится.
Во-вторых,
открытие внутренней страницы сайта не приводит к воссозданию
общей структуры фреймов. Особенно часто эта проблема возникает
при использовании пользователем поисковых машин, когда на
свой запрос он получает адрес внутренней страницы сайта.
В-третьих,
пользователь не может сохранить адрес на конкретную страницу
сайта , например, в Избранном, чтобы иметь возможность сразу
же попасть в нужный раздел.
В-четвертых,
не только пользователь, но и владелец сайта не может указать
адрес на конкретную страницу, что порой очень необходимо,
например, при размещении рекламной информации, новостей во
внешних источниках.
Как
решить проблему адресной строки?
В
данной статье дается описание способа, позволяющего полностью
победить проблему адресной строки, а, значит, и всех проблем,
возникающих в связи с ней. На сайте www.key.scn.ru/eng/
вы можете увидеть реальные результаты применения предлагаемого
подхода.
Общий
способ решения
Проблема адресной строки возникает из-за того, что построение
идет сверху вниз и основные страницы, несущие практически
весь объем информации, выступают в пассивной роли, никак не
влияя на свое размещение.
Мы
предлагаем изменить это. Основная идея предлагаемого подхода
заключается в том, что каждая информационная страница сайта
отвечает за формирование требуемой ей фреймовой структуры.
Таким
образом, при загрузке страница определяет свой контекст. И
если она не обнаруживает требуемого окружения, то сперва это
окружение создается, а уже затем происходит реальная загрузка
требуемой страницы.
Этот
подход позволяет полностью избавиться как от проблемы адресной
строки, так и от всех ей сопутствующих.
Пример
учебного сайта
Ниже представлена структура учебного сайта, используемая в
дальнейшем при описании решения.
Структура
окна состоит из двух фреймов: menu и main. Фрейм menu является
статичным и всегда содержит страницу menu.htm, в которой описывается
меню сайта. Фрейм main является основным и будет содержать
информационные страницы.
Для
описания такой структуры сайта используется следующий код:
<frameset
rows="40,*">
<frame name="menu" src="menu.htm">
<frame name="main" src="index.htm">
</frameset>
Реализация
на стороне клиента
В данном разделе мы покажем, как можно реализовать предлагаемый
подход на стороне клиента. Такое решение накладывает ряд требований
на клиента, а именно:
- поддержка
браузером технологии DHTML
- поддержка
браузером языка JavaScript
- разрешение
на выполнение скриптов
Следует
заметить, что такие основные браузеры, как Internet Explorer
версии 4.0 и выше, и Netscape Navigator версии 4.0 и выше,
поддерживают как JavaScript, так и DHTML.
Решение
Для решения проблемы адресной строки необходимо
- проверить
окружение страницы
- в
случае отсутствия требуемой фреймовой структуры, создать
ее.
Для
минимизации кода, который необходимо выполнить на каждой странице,
мы предлагаем вынести в отдельный файл функцию проверки и
создания фреймовой структуры, оставив только вызов этой функции
на страницах сайта. Это позволяет достичь нескольких преимуществ:
уменьшение суммарного объема страниц, ускорение загрузки,
улучшение сопровождаемости сайта.
Функция
проверки и создания фреймовой структуры
Функция проверки CheckFrames будет размещаться в файле frames.js,
на который нужно будет прописать ссылку в каждой информационной
странице, загружаемой в фрейм main.
Разберем
теперь саму функцию.
Объявление
функции выглядит следующим образом:
function
CheckFrames(PageURL){
}
В
функцию передается один параметр PageURL, указывающий на загружаемую
страницу, которую необходимо будет разместить в фрейме main.
Первым
делом необходимо проверить текущее окружение. Для этого есть
несколько способов, но в данном случае мы будем проверять
название фрейма, в который загружается страница.
function
CheckFrames(PageURL){
if (window.name != "main"){
}
}
В
условии сравнивается имя окна, в которое загружается страница,
с названием основного фрейма main.
Если
имя окна и название основного фрейма не совпадают, то это
означает, что страница загружается в обычном порядке и требуется
воссоздать нужное окружение. Если же имя окна и название фрейма
совпали, то это означает, что страница находится в корректном
окружении и ничего делать не нужно.
Определив
на предыдущем шаге, что страница загружается без корректного
окружения, мы выполнили только первую часть поставленной задачи.
Теперь рассмотрим, как выполнить вторую - создать требуемое
окружение. Для этого воспользуемся возможностями DHTML - методом
документа write.
function
CheckFrames(PageURL){
if (window.name != "main"){
window.name="root";
document.write("<frameset rows='40,*'>");
document.write("<frame name='menu' src='menu.htm'>");
document.write("<frame name='main' src='" + PageURL
+ "?embedded=yes'>");
document.write("</frameset>");
}
}
Легко
заметить, что четыре вызова метода document.write просто-напросто
создают требуемую структуру фреймов, указывая в качестве источника
для фрейма menu файл menu.htm, а для основного фрейма указывая
адрес, переданный параметром PageURL в функцию. Следует отметить
добавление строки запроса к адресу основной страницы. Это
требуется выполнить по двум причинам.
Во-первых,
простое указание того же самого адреса приведет к тому, что
браузер загрузит из кэша только что измененную нами страницу.
Указание же строки запроса заставит его повторить свой запрос
к серверу. При повторной же загрузке фреймовая структура будет
уже корректна, поэтому страница загрузиться там, где ей и
положено.
Во-вторых,
наличие данного параметра также говорит о том, как происходит
загрузка страницы. Именно проверка этого параметра и будет
происходить при реализации на стороне сервера. Также ею можно
было бы воспользоваться и в данном случае.
Функция
проверки и создания требуемой структуры фреймов готова. Если
потребуется изменить фреймовую структуру сайта, то будет достаточно
изменить данную функцию.
Изменения
основных страниц
Функция проверки нами создана в предыдущем разделе, но этого
не достаточно, нужно обеспечить поддержку данного механизма
во всех страницах сайта, загружаемых в фрейм main.
Сперва
необходимо указать, где находится функция проверки CheckFrames.
<html>
<head>
...
</head>
<script language="JavaScript" src="frames.js">
</script>
<body>
...
</body>
</html>
После
этого осталось только вызвать функцию проверки.
<html>
<head>
...
/head>
<script language="JavaScript" src="frames.js">
</script>
<script language="JavaScript">
CheckFrames(document.URL);
</script>
<body>
...
</body>
</html>
Для
определения адреса загружаемой страницы, мы воспользовались
стандартным свойством документа URL. Это позволяет включать
в каждый файл данный код без всяких изменений.
Осталось
добавить полученный код в каждую страницу сайта и проблема
полностью решена.
В
том случае, если ваш хостер поддерживает механизм Server Side
Includes (вставки на стороне сервера - SSI), можно вынести
блок вызова функции проверки в отдельный файл, который затем
подключать при помощи директивы include во все информационные
страницы сайта.
На
www.key.scn.ru/eng/
вы можете увидеть сайт, использующий данный подход. Заходите
- смотрите - используйте сами.
Решение
на стороне сервера
В данном разделе будет приведена реализация предлагаемого
подхода на стороне сервера. Это позволяет снять все ограничения
с клиента, но налагает ряд требований к серверу, а именно:
поддержка
сервером технологии ASP или PHP
Решение
При реализации на стороне сервера необходимо немного изменить
способ проверки окружения страницы. В данном случае он будет
основан на проверке в строке запроса нужного параметра, в
предлагаемом примере это параметр embedded.
В
том случае, когда страница загружается в корневой фрейм _top,
адресная строка не будет содержать требуемого параметра. Это
будет означать, что в ответ на этот запрос, необходимо вернуть
страницу, содержащую фреймовую структуру.
В
том же случае, если в строке запроса будет присутствовать
параметр embedded, ничего делать не нужно, кроме возврата
обычного содержимого страницы.
Ниже
дан пример реализации с использованием технологии Active Service
Pages.
Функция
проверки и создания фреймовой структуры
Как и в случае с реализацией на стороне клиента, реализация
функции проверки и создания вынесена в отдельный файл - frames.inc,
который затем будет подключаться ко всем страницам сайта.
Если
потребовалось создание фреймовой структуры, то функция возвращает
True, в противном случае возвращается False.
Объявление
функции выглядит следующим образом:
<%
function CheckFrames()
end function
%>
В
данном случае адрес основной страницы сайта не передается
и он будет определяться из контекста.
Сперва
осуществляется проверка фреймовой структуры:
<%
function CheckFrames()
if (Request.QueryString("embedded").Count = 0) then
CheckFrames = False
...
else
CheckFrames = True
end if
end function
%>
В
зависимости от результата проверки определяется возвращаемое
значение функции.
В
том случае, если параметр embedded отсутствует, необходимо
создать фреймовую структуру.
<%
function CheckFrames()
if (Request.QueryString("embedded").Count = 0) then
CheckFrames = False
PageURL = "http://" & Request.ServerVariables("server_name")
& Request.ServerVariables("script_name")
Response.write("<frameset rows='40,*'>")
Response.write("<frame name='menu' src='menu.asp'>")
Response.write("<frame name='main' src='" + PageURL
+ "?embedded=yes'>")
Response.write("</frameset>")
else
CheckFrames = True
end if
end function
%>
Первая
выделенная строка отвечает за получение адреса текущей страницы.
Четыре следующих строки определяют фреймовою структуру, которая
будет отослана клиенту.
Функция
проверки и создания фреймовой структуры готова. Теперь рассмотрим,
что требуется внести в основные страницы для поддержки данного
решения.
Изменения
основных страниц
Выше была описана функция проверки и создания фреймовой структуры.
Теперь необходимо включить поддержку на каждой странице сайта,
загружаемой в фрейм main.
Сперва
укажем, где находится наша функция. Для этого мы воспользуемся
директивой include механизма Server Side Includes:
<html>
<head>
..
</head>
<!--#include virtual="frames.inc"-->
<body>
..
</body>
</html>
Теперь
необходимо вызвать эту функцию и проверить результат ее исполнения.
<html>
<head>
..
</head>
<!--#include virtual="frames.inc"-->
<% if not CheckFrames() then Response.End()%>
<body>
..
</body>
</html>
В
том случае, если функция вернула значение False, необходимо
прервать обработку, что выполняется при помощи вызова метода
Response.End().
Таким
образом, включение двух строчек на каждую страницу сайта приведет
к полному решению проблемы адресной строки.
Заключение
В статье была описана проблема адресной строки, возникающая
при использовании фреймов, а также предложен подход, позволяющий
полностью решить указанную проблему.
Кроме
общего метода решения, были также предложены два способа реализации:
один на стороне клиента, другой на стороне сервера. Оба подхода
имеют как преимущества, так и недостатки.
Ниже
дан ряд рекомендаций, который поможет вам в выборе той или
иной реализации.
Используйте
реализацию на стороне клиента , если:
Ваш
хостер не поддерживает ни ASP, ни PHP.
Вы не хотите зависеть от функциональности сервера.
Используйте
реализацию на стороне сервера , если:
Вы
не хотите зависеть от возможностей клиентов и желаете обеспечить
доступ к вашему сайту максимальному числу пользователей.
Ваш хостер предоставляет поддержку или ASP, или PHP.
Свои
замечания и предложения по данной статье вы можете отправлять
по адресу mailto:ask@key.kts.ru?subject=Фреймы.
Решение проблемы адресной строки.
|