|
|||||||||
Третьяков
М.Ю., Тимофеев
И.Ю. РезюмеВ статье дается общее решение проблемы адресной строки, возникающей при использовании фреймов. Проблема заключается в том, что при навигации по такому сайту, адресная строка в браузере не меняется. Это, в свою очередь, приводит к целому ряду дополнительных проблем: открытие внутренних страниц происходит без воссоздания общей структуры всех фреймов, нельзя сохранить ссылку на конкретную страницу сайта. Кроме общего решения проблемы также предлагаются два способа реализации: на стороне клиента и на стороне сервера. СодержаниеВведение ВведениеИспользование фреймов позволяет структурировать представление информации в окне браузера, делая возможным размещение общих элементов сайта (меню, заголовок, содержание) в отдельных фреймах. Такой подход имеет ряд преимуществ: наличие по одному файлу на каждый общий элемент, ускоренная загрузка страниц сайта, т.к. общие элементы загружаются только один раз. Но, также, и ряд недостатков. К ним можно отнести и такую проблему, как проблема адресной строки. В чем же заключается проблема адресной строки? При использовании фреймов на сайте существует обычно одна страница, которая задает общую структуру, указывая, где и каким образом будут размещаться другие фреймы. Эта страница загружается первой и затем не изменяется. Все переходы пользователя со страницы на страницу сайта происходят внутри других фреймов. Таким образом, пользователь в адресной строке всегда видит только путь к начальной странице, который не изменяется при переходах. К чему приводит проблема адресной строки? Во-первых, неизменность адресной строки приводит в замешательство пользователя, т.к. он не может из адреса получить информацию о том, где он сейчас реально находится. Во-вторых, открытие внутренней страницы сайта не приводит к воссозданию общей структуры фреймов. Особенно часто эта проблема возникает при использовании пользователем поисковых машин, когда на свой запрос он получает адрес внутренней страницы сайта. В-третьих, пользователь не может сохранить адрес на конкретную страницу сайта , например, в Избранном, чтобы иметь возможность сразу же попасть в нужный раздел. В-четвертых, не только пользователь, но и владелец сайта не может указать адрес на конкретную страницу, что порой очень необходимо, например, при размещении рекламной информации, новостей во внешних источниках. Как решить проблему адресной строки? В данной статье дается описание способа, позволяющего полностью победить проблему адресной строки, а, значит, и всех проблем, возникающих в связи с ней. На сайте 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> Реализация на стороне клиентаВ данном разделе мы покажем, как можно реализовать предлагаемый подход на стороне клиента. Такое решение накладывает ряд требований на клиента, а именно:
Следует заметить, что такие основные браузеры, как 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/ вы можете увидеть сайт, использующий данный подход. Заходите - смотрите - используйте сами. Решение на стороне сервераВ данном разделе будет приведена реализация предлагаемого подхода на стороне сервера. Это позволяет снять все ограничения с клиента, но налагает ряд требований к серверу, а именно:
РешениеПри реализации на стороне сервера необходимо немного изменить способ проверки окружения страницы. В данном случае он будет основан на проверке в строке запроса нужного параметра, в предлагаемом примере это параметр 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(). Таким образом, включение двух строчек на каждую страницу сайта приведет к полному решению проблемы адресной строки. ЗаключениеВ статье была описана проблема адресной строки, возникающая при использовании фреймов, а также предложен подход, позволяющий полностью решить указанную проблему. Кроме общего метода решения, были также предложены два способа реализации: один на стороне клиента, другой на стороне сервера. Оба подхода имеют как преимущества, так и недостатки. Ниже дан ряд рекомендаций, который поможет вам в выборе той или иной реализации. Используйте реализацию на стороне клиента , если:
Используйте реализацию на стороне сервера , если:
Свои замечания и предложения по данной статье вы можете отправлять по адресу mailto:ask@key.kts.ru?subject=Фреймы. Решение проблемы адресной строки. Третьяков
М.Ю., Тимофеев
И.Ю.
|
|||||||||
![]() |
![]() |