Сразу хотелось бы поздравить тех, кто читает эту статью - Вам крупно повезло если Вы сразу попали на эту страницу. Мне вообще за написание этой статьи памятник полагается.:)) Часы гугления все таки дали свой результат - я нашел как сделать инклюд любого файла с помощью ява-скрипта. И теперь делюсь этой важной инфой с Вами. Я даже представляю радостные улыбки тех, кто все же нашел ее, эту статью, с рабочим механизмом подключения файлов с помощью ява-скрипт. Также радовался и я.
Часы поиска и лазания по непонятным форумам программистов, читание заумных и непонятных фраз всяких "челов" со звездной болезнью (больше всего бесило когда в ответ на вопрос на форуме какое-то тело оставляет ссылку на результаты поиска, бывают такие мудаки:)) практически не дали результата, и вот, когда я уже было отчаился, я набрел на один сайт иностранного производства, естественно по "ненашему" написанный, на котором как раз и велась речь об инклюдах разными способами. Адрес сайта не помню (даже если б помнил ссылку бы не оставил, зачем мне дополнительная внешняя ссылка:)), но, использовав гугл-переводчик, мне сразу же стало ясно как и что куда тыкать чтобы все заработало.
Немного о том для тех, кто не знает, что такое инклюд и зачем он нужен. Инклюд - это подключение (вставка) какого-либо файла в хтмл-код другого файла, который является основным (обычно). Содержимым инклюда может быть что угодно - то ли это хтмл-код, то ли это пхп-код и т.п. Зачем нужен инклюд - ну, к примеру, у Вас сайт работает на движке, который собирается с помощью шаблонов, а в шаблонах php не поддерживается, хотя на основном хостинге пхп поддерживается, так вот можно создать файл-инклюд, в него вставить пхп-код, и подключить этот файл в файл шаблона с помощью яваскрипта. Такое может понадобиться, к примеру, при установке кодов биржи ссылок в файлы, которые не поддерживают php.
Как Вы скорее всего знаете, инклюды есть для PHP, SSI, CCS:
PHP - <?php require_once ('/include/header.htm'); ?> (или на подобие)
SSI - <!--#include virtual="/inc/footer.htm" -->
CCS - @import url(/css/style.css);
А вот про Java знают не многие. Многие вообще думают, что запись типа <script language="javascript" type="text/javascript" src="/script.js"></script> делает импорт файла, но они крупно ошибаются. Конечно же, она как бы и делает импорт, но только яваскипт-кода, содержашегося в файле с расширение .js.
Итак, все по порядку:
1. Между тегами <head>...</head> добавляем ниже приведенный код:
<script>
function clientSideInclude(id, url) {
var req = false;
// For Safari, Firefox, and other non-MS browsers
if (window.XMLHttpRequest) {
try {
req = new XMLHttpRequest();
} catch (e) {
req = false;
}
} else if (window.ActiveXObject) {
// For Internet Explorer on Windows
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
req = false;
}
}
}
var element = document.getElementById(id);
if (!element) {
alert("Bad id " + id +
"passed to clientSideInclude." +
"You need a div or span element " +
"with this id in your page.");
return;
}
if (req) {
// Synchronous request, wait till we have it all
req.open('GET', url, false);
req.send(null);
element.innerHTML = req.responseText;
} else {
element.innerHTML =
"Sorry, your browser does not support " +
"XMLHTTPRequest objects. This page requires " +
"Internet Explorer 5 or better for Windows, " +
"or Firefox for any system, or Safari. Other " +
"compatible browsers may also exist.";
}
}
</script>
2. Вышеприведенный скрипт универсален, в нем ничего менять не нужно, просто вставляете его в нужном месте страницы. Далее инклюд будем рассматривать на примере. К примеру, у нас есть файл file.html, который лежит в папке "inc" в корневой папке сайта. Нам нужно его подключить в какой-то другой файл, к примеру, под названием index.html. Значит следующие действия у нас будут такие - открываем index.html, вставляем перед тегом </head> выше представленный java script, далее находим тег body, и если он имеет вид
<body>
, то меняем его на ниже следующий:
<body onload="clientSideInclude('file', '/inc/file.htm');">
3. Теперь файл-инклюд подключен, нам остается только определить его местонахождение на странице, для этого добавьте в нужное место страницы код:
<span id="file"></span>
Очень важно, содержимое инклюда должно быть целым элементом с закрытыми тегами, т.е. будь-то таблица, или блок - все теги в них должны быть закрытыми, т.е. инклюд должен существовать и как отдельная законченная страница. Можете смело вставлять в инклюд php-код, и подключать его к страницам, которые этот php-код не поддерживают.
Если Вам нужно подключить сразу 2 и более файлов, то просто добавляете в элемент body новую переменную с подключаемым файлом, а по телу страницы разносите блоки с инклюдами туда куда Вам нужно. Пример - нужно подключить два файла file1.htm и file2.htm. Делаем:
в body добавляем
<body onload="clientSideInclude('file1', '/file1.htm'); clientSideInclude('file2', '/file2.htm');">
в нужные места страницы ставим
<span id="file1"></span>
и
<span id="file2"></span>
Если у кого скрипт не работает - пишите в коментах отзывы.
Комментарии (18)
