Фреймы. Решение проблемы адресной строки

"... В статье дается общее решение проблемы адресной строки, возникающей при использовании фреймов. Проблема заключается в том, что при навигации по такому сайту, адресная строка в браузере не меняется...."

Третьяков М.Ю., Тимофеев И.Ю.
Компания Ключ

Резюме
В статье дается общее решение проблемы адресной строки, возникающей при использовании фреймов. Проблема заключается в том, что при навигации по такому сайту, адресная строка в браузере не меняется. Это, в свою очередь, приводит к целому ряду дополнительных проблем: открытие внутренних страниц происходит без воссоздания общей структуры всех фреймов, нельзя сохранить ссылку на конкретную страницу сайта. Кроме общего решения проблемы также предлагаются два способа реализации: на стороне клиента и на стороне сервера.

Содержание
Введение
Общий способ решения
Реализация на стороне клиента
Реализация на стороне сервера
Заключение

Введение
Использование фреймов позволяет структурировать представление информации в окне браузера, делая возможным размещение общих элементов сайта (меню, заголовок, содержание) в отдельных фреймах. Такой подход имеет ряд преимуществ: наличие по одному файлу на каждый общий элемент, ускоренная загрузка страниц сайта, т.к. общие элементы загружаются только один раз. Но, также, и ряд недостатков. К ним можно отнести и такую проблему, как проблема адресной строки.

В чем же заключается проблема адресной строки?

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

К чему приводит проблема адресной строки?

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

Во-вторых, открытие внутренней страницы сайта не приводит к воссозданию общей структуры фреймов. Особенно часто эта проблема возникает при использовании пользователем поисковых машин, когда на свой запрос он получает адрес внутренней страницы сайта.

В-третьих, пользователь не может сохранить адрес на конкретную страницу сайта , например, в Избранном, чтобы иметь возможность сразу же попасть в нужный раздел.

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

Как решить проблему адресной строки?

В данной статье дается описание способа, позволяющего полностью победить проблему адресной строки, а, значит, и всех проблем, возникающих в связи с ней. На сайте 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.