Включение фрагментов кода на JS в документ

С развитием всемирной Сети у ее пользователей появилось множество замечательных возможностей. Оной из них является бесплатный хостинг. Разместить свою страничку в Сети проще простого, да к тому же еще за 5 минут, бесплатно... Но всем читателям известно, где по-настоящему есть бесплатный сыр: в обмен на услуги размещения информации, на страничках бесплатного хостинга всплывают баннеры хостера. Также приходится существовать без удобств: как правило, такие сервисы, как SSI, Perl, PHP, SQL, как правило, отсутствуют. Только в последние время начали появляться халявные SSI. А как же быть тем, кто начал сайто-строение в те времена, когда данные сервисы присутствовали только на платных хостингах? Тем, у кого нет даже SSI. Данная статья и призвана им помочь.

А в чем собственно проблема? - могут удивиться непосвященные читатели. Нет, в первое время все будет Ок. Страницы, которые создавались часами, будут загружаться на сервер за считанные секунды. Но вот когда через совсем не большой промежуток времени количество страниц на сайте достигнет нескольких десятков и в очередной раз потребуется добавить новый пункт меню, или изменить адрес Веб-мастера, вот тогда вам и надоест грузить все эти HTML. И возникнет мысля: ведь код таких элементов как меню, шапка, баннеры :) за частую присутствуют на каждой странице в неизменной форме. А при малейшем изменении одного из элементов (скажем надо добавить новый пункт меню), приходится редактировать каждый HTML файл, а после все это загружать. Так и появляется поместить эти повторы в отдельный файл, подключить его к каждой странице, и просто внося в него изменения влиять на содержимое всех страниц. В свое время с этой проблемой боролись про помощи фреймов. Веб-мастерам было очень удобно. А посетителям? Ну, как повезет...

С появлением SSI (Server Side Include - перевод в лоб: Серверная Сторона Подключения) все конкретно изменилось. Макроинструкии, исполняемые на сервере позволяли вставлять в документ содержание другого файла. Таким образом, такие элементы как меню выносились в отдельный файл и подключались по необходимости. Теперь для того, чтоб изменить меню на неограниченном количестве страниц, необходимо было изменить один единый файл. Почему SSI так быстро стал популярным? Все очень просто: документ генерировался на стороне сервера, а пользователь получал готовый результат, даже не подозревая, что он был "сложен" в одно целое из нескольких частей. Все вроде бы наладилось. Но не тут то было. SSI считался элитным сервисом, кроме того прилично нагружал сервер. По этой причине только в последние время SSI появился на бесплатных хостингах.

А как же те, кто начинал давно. Те, у кого сайт разросся. Те, у кого нет средство и желание на приобретение платного хостинга и доменного имени. И вообще, что делать тем, кто не хочет переезжать?

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

Включение фрагментов кода на JS в документ осуществляется при помощи тега <script>:

<script Language="JavaScript" SRC="путь к файлу с JS кодом">
</script>

Я не буду останавливаться на толковании тегов JS. Кроме того, по-моему, они интуитивно понятны и просты в понимании.

"Путь к файлу с JS кодом" указывает путь и имя файла, содержащего JS код. Код, содержащийся в указанном файле подключается к документу, и у посетителя создается впечатление что код, содержащийся в подключаемом файле попросту был размещен в документе. При этом при просмотре кода документа, посетитель не увидит кода, что содержится в подключаемом файле, а только выше указанную ссылку на него - сам файл будет загружен как отдельно. Из вышесказанного видно главное отличие данного метода от применения SSI. Страница собирается не на сервере, а на компьютере пользователя. Но сам пользователь, разумеется, и не подозревает про это.

Нетерпеливые читатели удивляться - как же может помочь подключение JS кода из файла, когда надо подключать HTML или вовсе текст? Запросто! В JS для вставки строки в документ существует команда

document.write('строка, которую необходимо вставить в документ');

Все, что заключено в кавычки ' ' будет попросту вставлено в документ. Таким образом, можно спокойно вставить в файл конструкцию типа:

document.write('<a href="some link">Link</a>');

и впредь изменением лишь одного подключаемого файла влиять на содержание всего сайта.

Хочу лишь заметить, что в роли кавычек можно использовать как одинарные ' ' так и двойные " ", но при этом в содержимом коде должны отсутствовать такие же кавычки. В противно случае перед ними следует ставить знак \ , например:

document.write("<a href=\"some link\">Link</a>");

И маленький пример:

index.html

<html>
<head>
<title>JS SSI Demo</title>
</head>
<body>
<!- Меню сайта ->
<script Language="JavaScript" SRC="menu.js">
</script>
<!- Конец меню сайта ->
<!- Остальное содержание страницы... ->
</body>
</html>

И сам подключаемый файл:

menu.js

document.write('<a href="some menu link 1">Пункт меню 1</a>');
document.write('<a href="some menu link 2">Пункт меню 2</a>');
document.write('<a href="some menu link 3">Пункт меню 3</a>');
document.write('<a href="some menu link 4">Пункт меню 4</a>');

В результате при открытии файла index.html в него будет подставлено содержимое menu.js и в окне браузера появятся ссылки, код которых находится в menu.js. Также хочу подчеркнуть, что содержимое файла menu.js будет подставляться внутри тега <script>, по сему простая прописка в файле <a href="some menu link 1">Пункт меню 1</a>... ( без document.write(' '); ) не даст ожидаемого результата.