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

   
Я люблю фреймы. Глобальные переменные java script.

Автор: Руслан Кашапов
Сайт: http://www.roolic.com.ua

Глава 1
ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ
JAVA SCRIPT

Разберем использование глобальной переменной Java Script в фреймсодержащих документах на примере простой задачи - сайт с картинками.


Пример 1

Имеем два фрейма. В первом - превью картинок (thumbnails), во втором ожидается собственно сама картинка большого размера. Картинок много (возьмем 20), они часто обновляются и/или изменяются. Одновременно показывается определенное количество превью (5 штук), причем существуют ссылки на следующую/предыдущую группу.

Все картинки и превью хранятся в подкаталоге Images и названы соответственно pic1.gif...pic50.gif и pic1_Thumb.gif...pic50_Thumb.gif.

Фреймсет-файл выглядит банально, за исключением Java Script строк инициализации переменной.

<script language="JavaScript">
PicNum = 0;
MaxNum = 20;
Thumbs = 5;
ThumbsStart = 1;
</script>
<frameset rows="*, 150" border="0" framespacing="0">
<frame src="Pic.html" name = "Pic" frameborder="NO">
<frame src="Thumbs.html" name = "Thumbs" frameborder="NO">
</frameset>

Файл с превью автоматически генерирует тело html документа на основе информации, которая передана ему в глобальных переменных, определенных выше. Но сначала определим основные функции. GotoNext () и GotoPrev () выполняют переход на соответственно следующую и предыдущую группы превью.

<script language="Java Script">

function GotoPrev () {
top.ThumbsStart = top.ThumbsStart - top.Thumbs;
self.location = "Thumbs.html";
}

function GotoNext () {
top.ThumbsStart = top.ThumbsStart + top.Thumbs;
self.location = "Thumbs.html";
}

function SetPicNum (Num) {
top.PicNum = Num;
}

</script>

Теперь собственно сгенерируем тело документа:

<script language="JavaScript">
document.write ("<center>");
n1 = parent.ThumbsStart;
n2 = top.ThumbsStart + top.Thumbs - 1;
if (n2 > top.MaxNum){n2 = top.MaxNum};
if (n1 != 1){document.write ("<a href=\"javascript:GotoPrev()\">PREV</a> ");}
for (n = n1; n<=n2; n++)
{
ThumbName = "Images/pic" + n + "_Thumb.gif";
document.write ("<a href = \"Pic.html\" target = \"Pic\" onClick = \"SetPicNum (" + n +")\"><img src = \"" +ThumbName + "\"></a> ");
}
if (n2 < top.MaxNum){document.write ("<a href=\"javascript:GotoNext()\">NEXT</a> ");}
document.write ("</center>");
</script>

Как это работает? Рассказываем подробности. Переменные n1 и n2 определяют номера соответственно первой и последней картинок в данной группе превью. В зависимости от их значений в тело документа вписываются ссылки на предыдущую и последующие группы. Причем переключение между этими группами осуществляется путем банальной перезагрузки фрейма тем же самым документом, но картинки будут уже совсем другими, потому что изменилось значение глобальной переменной ThumbsStart.

Затем в цикле мы по очереди вставляем в документ превью картинок обрамленные ссылкой на файл Pic.html (target="Pic"). Не удивляйтесь, что все картинки ссылаются на один и тот же документ. Когда пользователь щелкает на превью, по onClick активизируется функция SetPicNum (n), изменяющая глобальную переменную PicNum. Фрейм с большой картинкой тупо перегружается и показывает нам картинку, номер которой содержится в упомянутой переменной:

<script language="JavaScript">
if (top.PicNum != 0) {
PicName = "Images/pic" + top.PicNum + ".gif";
document.write ("<p align=\"center\"><img src = \"" + PicName "\"></p>");
}
else { document.write ("<p align=\"center\">Картинка не выбрана</p>");}
</script>

Если фреймсет загрузился в первый раз значение переменной PicNum = 0, программа выведет пояснительный текст.

Работу системы можно посмотреть здесь (открывается в новом окне броузера). Скачать архив с данным примером для анатомического вскрытия и изучения можно здесь (zip 30.7 K).

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

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


Пример 2

Здесь мы рассмотрим более актуальный случай - динамически раскрывающиеся меню. Пусть у нас есть три пункта меню, в каждом из которых есть свои подменю (по две штуки). Назовем их незатейливо (в жизни все гораздо интересней) - Menu1 ... Menu3, SubMenu1_1, SubMenu1_2 ... SubMenu3_2

Открытости/закрытости пункта меню поставим в соответствие элемент массива булевых переменных. Значение true (1) соответствует открытому пункту меню, false (0) - закрытому. Инициализируется массив во фреймсете:

MMenu = new Array(false, false, false);

Файл меню выглядит следующим образом:

<script language="JavaScript">
function SwitchMenu (Num){
top.MMenu[Num] = !top.MMenu[Num];
}
function PicName (Num){
if (top.MMenu[Num]){Pname = "Open.gif"}
else {Pname = "Closed.gif"}
return (Pname); }
Pic1url = "Images/" + PicName(0);
Pic2url = "Images/" + PicName(1);
Pic3url = "Images/" + PicName(2);
document.write ("<a href=\"Menu.html\" onClick=\"SwitchMenu(0)\"><img src=\"" + Pic1url + "\" border=\"0\"> <b>Menu1</b></a>");
if (top.MMenu[0]) {document.write ("<br><a href=\"#\"> SubMenu1_1</a><br><a href=\"#\">SubMenu1_2</a>") }
document.write ("<br><a href=\"Menu.html\" onClick=\"SwitchMenu(1)\"><img src=\"" + Pic2url + "\" border=\"0\"> <b>Menu2</b></a>");
if (top.MMenu[1]) {document.write ("<br><a href=\"#\"> SubMenu2_1</a><br><a href=\"#\">SubMenu2_2</a>")
document.write ("<br><a href=\"Menu.html\" onClick=\"SwitchMenu(2)\"><img src=\"" + Pic3url + "\" border=\"0\"> <b>Menu3</b></a>");
if (top.MMenu[2]) {document.write ("<br><a href=\"#\"> SubMenu3_1</a><br><a href=\"#\">SubMenu3_2</a>")} </script>

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

Рабочую версию примера можно посмотреть здесь (открывается в новом окне), скачать здесь (zip 1.75 K).

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

Автор: Руслан Кашапов
Сайт: http://www.roolic.com.ua

 

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