|
|
 JavaScript спешит на помощь - 2
Ну вот, казалось бы, чего еще желать? А ненасытным вебмастерам все мало. Теперь они хотят построить весь сайт на одном шаблоне! А почему бы и нет? Ведь дизайн страниц в пределах сайта не изменяется, меняется лишь содержание страниц. Стоит лишь в нужный момент подставить нужный адрес файла, содержащего код, который необходимо вставить. А вот как сделать, чтоб один шаблон, скажем файл dat.html менял имена подключаемых файлов и как следствие свой вид и информацию? Такая задача легко решается с приминением условий и параметров. Итак, нам нужно каким то образом передать странице dat.html один или несколько параметров и в зависимости от принятых параметров подключать тот или иной файл. Передавать параметры будем через адресную строку, например: dat.html?id=101 Далее мы детально рассмотрим ее. Теперь нам надо написать процедуру обработки адресной строки для того, чтобы можно было извлечь значение параметра. Поскольку данная процедура в будущем опять же может нам понадобится в других документах, давайте разместим ее в отдельном файле bild.js: function GetParam(search, name){ name=name+"="; var gp=""; if (search!='') { if (search.indexOf (name, 0)!=-1){ var startpos=search.indexOf(name, 0)+name.length; var endpos=search.indexOf("&",startpos); if (endpos<startpos) {endpos=search.length;} var gp=p.substring(startpos,endpos); } else { gp=""; } } else { gp=""; } return gp; } var p=window.location.search; var gp=GetParam(p, "id"); if (gp=="") {gp="default";} document.write('<img src="'+gp+'.jpg">'); Вкратце о работе процедуры: мы ищем значение параметра с именем id, переданого в адресной строке в формате: имя_документа?имя_параметра1=значение_параметра1& имя_параметра2=значение_параметра2&… Как видно имя документа отделяется от параметров знаком вопроса. После чего идет имя параметра и его значение, между ними знак равенства. Имена параметров разделяются знаком амперсанд - &. То есть можно добавлять обработку неограниченого числа параметров. В нашем примере процедура ищет значение только одного параметра с именем id: var gp=GetParam(p, "id"); Если параметра нет, присваиваем ему значение "default": if (gp=="") {gp="default";} После этого можем использовать значение параметра, например, вставить в документ строку, отображающюю соответствующюю картинку: document.write('<img src="'+gp+'.jpg">'); Вот собственно и все. Работу самой процедуры поиска рассматривать не будем, и так все понятно, а кому нет – пусть мне напишет, помогу разобраться. Ну и сам dat.html: <html> <head> <title>Dynamic add demo</title> </head> <body> <script LANGUAGE="JavaScript"> function mov(form) { var myindex=form.dif.selectedIndex location.href=(form.dif.options[myindex].value); } </script> <form> <select NAME="dif" size="1"> <option value="dat.html?id=pic1">Рисунок 1</option> <option value="dat.html?id=pic2">Рисунок 2</option> <option value="dat.html?id=pic3">Рисунок 3</option> </select> <INPUT onclick="mov(this.form, window)" type=button value=Смотреть> </form> <script language="JavaScript" src="bild.js"></script> </body> </html> При открытии страницы будет отображен рисунок, содержащийся в файле default.jpg (так как параметр задан не будет). Но стоит выбрать один из пунктов меню выпадающего списка и нажать на кнопку "Смотреть" и тут откроется выбраная картинка. Как видно из листинга, при выборе пункта меню "Рисунок 1", документу dat.html будет передан параметр id равный "pic1". После чего в подключаемом файле bild.js значение параметра будет подставлено в строку: document.write('<img src=”значение_параметра.jpg”>'); вследствии чего в документе dat.html будет отображет рисунок с именем значение_параметра.jpg (в нашем случае pic1.jpg). Конечно, никто не мешает передавать в параметре полное имя файла (особенно полезно когда файлы разные - jpg, gif, bmp...) или даже целые строки HTML кода. Функция mov в dat.html служит лишь для перехода по выбраной в вписке ссылке. Вот мы и рассмотрели такой не сложный, но очень полезный механизм. И это лишь простой пример. Сегодня для вас есть домашнее задание: модифицируйте код, добавив кнопки "Вперед" и "Назад" для просмотра картинок. И в заключении моего небольшого рассмотра возможностей JS по подключению внешних файлов хочу рассказать о некоторых приемуществах и особеностях использования таких вставок. Одно из самых главных приемуществ данного метода по сравнению с использованием SSI для вставок данных в документ является его скорость. Да, да именно скорость. Если на страницах сайта использовать одну и ту же вставку на JS, то она будет загружаться только один раз - при первом посещении сайта (и разумеется если вставка будет изменена). В последствии при дальнейшем серфинге по сайту вставка будет подгружаться из кеша броузера тоесть с винта посетителя. Этот факт явно ускорит загрузку страницы. Таким методом можно сократить часть загружаемой с сервера информации в несколько раз! Замечательная возможность - размещение любых данных, доступных по HTTP протоколу на любых страницах. Достаточно разместить на сайте строку: <script src="http://адрес_документа"></script> и его код будет вставлен в документ при его просмотре. Единственое что - подключаемый документ должен быть оформлен командами document.write - для текста. Разумеется, допустимо наличие в подключаемом документе JS кода, только уже без команд document.write Таким образом можно разместить много информации, занимающей мало места. Вспомним информеры. Они, как правило, графические – “весят” много, но информации несут мало. А вот если оформить их в виде таблицы на JS вставке, то грузиться они будут мгновенно. Кроме того, такая вставка не будет бросаться в глаза, и нарушать дизайн сайта. Ну, вот и все. Удачного сайтостроения! |
 |
