ErlangРаботыРевюСтатьиКнигаЗаказ
 

Весь сайт на одной странице

Кирилл Панфилов

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

В большинстве случаев такие интерфейсы реализуются с помощью технологии AJAX и объекта XMLHttpRequest, работа с которым ведётся по-разному в браузерах Internet Explorer и Mozilla (и прочими на основе Gecko) и который доступен в браузере Opera только с версии 8. В связи с этим код работы с объектом XMLHttpRequest представляет собой не меньше чем библиотеку. Подробнее о реализации таких динамичных обращений к серверу и выводе информации в режиме реального времени на экран можно прочитать у Дрю Маклеллана, а кросс-браузерную интерпретацию — в статье Дмитрия Котерова о Subsys_JsHttpRequest.

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

Итак, в тексте кода между <BODY> и </BODY> помещаем IFRAME и блок для загрузки информации:

<IFRAME ID="ifrm_cont" SRC="1.html" FRAMEBORDER="0" 
WIDTH="0" HEIGHT="0" onLoad="ploadinfo()"></IFRAME>
<DIV ID="divo"></DIV>

Между </HEAD> и <BODY> помещаем сценарий:

<SCRIPT LANGUAGE="JavaScript">
function pload(url) 
{
	oldbrowsers = (!document.getElementById || (window.opera && !document.readyState)) ? 1:0
	if(!oldbrowsers)
	{
	document.getElementById("ifrm_cont").src = url
	}
	else
	{
	parent.location = url
	}
}
function ploadinfo() 
{
	cont = document.getElementById("ifrm_cont").contentWindow.document.documentElement.innerHTML
	document.getElementById("divo").innerHTML = cont
}
</SCRIPT>

Осталось поставить ссылки, которые будут активизировать загрузку. Например, так: <A HREF="2.html?fullview" onClick="pload('2.html'); return false">Страница 2</A>. Эти ссылки вызывают функцию, перезагружающую IFRAME с новой страницей, адрес которой передаётся в функцию. Изначально же IFRAME загружается с какой-нибудь стартовой страницей. По факту загрузки содержимого элемента IFRAME активизируется функция, прочитывающая содержимое документа, загруженного в нулевой IFRAME, и заполняющая этим содержимым DIV-блок.

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

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

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

Главный же минус их в том, что пользователь может отключить JavaScript. Эту возможность необходимо предусмотреть. Именно для этого в качестве содержимого элемента HREF тэга <A> указывается адрес той страницы, которая будет загружаться при отключенных активных сценариях.

Ещё один минус — невозможность дать прямую ссылку на страницу с нужным фрагментом информации, как это возможно в общем случае с веб-страницами без фреймов. Следствие одно: применять динамичные веб-интерфейсы нужно не бездумно, а при действительной необходимости.