В предыдущей статье (см. МК №23 (246)) я рассказал вам о том, как с помощью JavaScript к HTML-документам можно подключать код, содержащийся в отдельном файле. Таким образом, повторяющиеся элементы сайта (меню, ссылки, адреса почты и прочее) можно вынести в отдельный файл и подключать его к нужным страницам. После переноса части кода страниц в отдельный файл уменьшается общий размер документов сайта, а изменение повторяющихся пунктов сводится к редактированию и загрузке на сервер одного единственного файла.

Ну вот, казалось бы, чего еще желать? А ненасытным web-мастерам все мало. Теперь они хотят построить весь сайт на одном шаблоне! А почему бы и нет? Ведь дизайн страниц в пределах сайта не изменяется, меняется лишь содержание страниц. Стоит лишь в нужный момент подставить нужный адрес файла, содержащего код, который необходимо вставить. А вот как сделать, чтоб один шаблон, скажем, файл 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');

Вкратце о работе процедуры: мы ищем значение параметра с именем id, переданного в адресной строке в формате

имя_документа?имя_параметра1=значение_параметра1&имя_параметра2=значение_параметра2&…

Как видно, имя документа отделяется от параметров знаком вопроса. После чего идет имя параметра и его значение, между ними знак равенства. Имена параметров разделяются знаком амперсанда —&. То есть, можно добавлять обработку неограниченного числа параметров. В нашем примере процедура ищет значение только одного параметра с именем id:

var gp=GetParam(p, "id");

Если параметра нет, присваиваем ему значение "default":

if (gp=="") {gp="default";}

После этого можем использовать значение параметра — например, вставить в документ строку, отображающую соответствующую картинку:

document.write('<img src="'+gp+'.jpg">');

Вот, собственно, и все. Работу самой процедуры поиска рассматривать не будем, и так все понятно, а кому нет — пусть мне напишет, помогу разобраться.

Ну и сам dat.html:

<title>Dynamic add demo</title> <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 type="button" value="Смотреть"> </form>

При открытии страницы будет отображен рисунок, содержащийся в файле default.jpg (так как параметр задан не будет). Но стоит выбрать один из пунктов меню выпадающего списка и нажать на кнопку Смотреть, вместо него откроется соответствующая картинка. Как видно из листинга, при выборе пункта меню "Рисунок 1" документу dat.html будет передан параметр id, равный "pic1". После чего в подключаемом файле bild.js значение параметра будет подставлено в строку document.write(''), а в документе dat.html будет отображен рисунок с именем значение_параметра.jpg (в нашем случае pic1.jpg). Конечно, никто не мешает передавать в параметре полное имя файла (особенно полезно, когда файлы в разном формате —.jpg, .gif, .bmp...) или даже целые строки HTML-кода. Функция mov в dat.html служит лишь для перехода по выбранной в списке ссылке.

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

Одно из самых главных преимуществ данного метода по сравнению с использованием SSI для вставок данных в документ является его скорость. Да, да именно скорость. Если на страницах сайта использовать одну и ту же вставку на JS, то она будет загружаться только один раз — при первом посещении сайта (а также, разумеется, если вставка будет изменена). Впоследствии при дальнейшем серфинге по сайту вставка будет подгружаться из кэша браузера, то есть с диска посетителя. Это явно ускорит загрузку страницы. Таким методом можно сократить часть загружаемой с сервера информации в несколько раз.

Замечательная возможность — размещение любых данных, доступных по HTTP-протоколу на любых страницах. Достаточно разместить на сайте строку , и код соответствующего документа будет вставлен при просмотре. Единственное «но» — подключаемый документ должен быть оформлен командами document.write (для текста). Разумеется, допустимо наличие в подключаемом документе JS-кода, только уже без команд document.write. Таким образом можно разместить много информации, занимающей мало места. Вспомним информеры. Они, как правило, графические — «весят» много, но информации несут мало. А вот если оформить их в виде таблицы на JS-вставке, то грузиться они будут мгновенно. Кроме того, такая вставка не будет бросаться в глаза и нарушать дизайн сайта.

Ну, вот и все. Удачного сайтостроения!