Web Creation - еженедельный сетевой журнал для вебмастеров

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

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

Резюме

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

Содержание

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

Введение

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

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

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

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

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

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

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

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

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

В данной статье дается описание способа, позволяющего полностью победить проблему адресной строки, а, значит, и всех  проблем, возникающих в связи с ней. На сайте www.key.scn.ru/eng/ вы можете увидеть реальные результаты применения предлагаемого подхода.

Общий способ решения

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

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

Таким образом, при загрузке страница определяет свой контекст. И если она не обнаруживает требуемого окружения, то сперва это окружение создается, а уже затем происходит реальная загрузка требуемой страницы.

Этот подход позволяет полностью избавиться как от проблемы адресной строки, так и от всех ей сопутствующих.

Пример учебного сайта

Ниже представлена структура учебного сайта, используемая в дальнейшем при описании решения.

menu
main

Структура окна состоит из двух фреймов: 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=Фреймы. Решение проблемы адресной строки.

Третьяков М.Ю., Тимофеев И.Ю.
Посетите сайты: Компания Ключ. Корпоративные Информационные Системы.
Key Company. Software Development.

 

© журнал принадлежит Web Creation
по всем вопросам обращаться А. Кузьмин