ZOOF Понедельник, 15.10.2018

Акции "Газпром" -
Добавить в избранное
Меню сайта
Погода
Праздники
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Форма входа
Логин:
Пароль:
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Главная » 2010 » Февраль » 8 » Инклюд файла с помощью Java Script
15:27
Инклюд файла с помощью Java Script
Часы поиска и лазания по непонятным форумам программистов, читание заумных и непонятных фраз всяких "челов" со звёздной болезнью (больше всего бесило когда в ответ на вопрос на форуме какое-то тело оставляет ссылку на результаты поиска, бывают такие мудаки:)) практически не дали результата, и вот, когда я уже было отчаился, я набрёл на один сайт иностранного производства, естественно по "ненашему" написанный, на котором как раз и велась речь об инклюдах разными способами. Адрес сайта не помню (даже если б помнил ссылку бы не оставил, зачем мне дополнительная внешняя ссылка:)), но, использовав гугл-переводчик, мне сразу же стало ясно как и что куда тыкать чтобы всё заработало.

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

Как Вы скорее всего знаете, инклюды есть для PHP, SSI, CCS:

PHP - (или на подобие)

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>


Набросал небольшой пример. Пути к файлам необходимо изменить применительно к Вашему случаю.


Просмотров: 1165 | Добавил: Akkermanec | Теги: js, java script, include | Рейтинг: 0.0/0
Всего комментариев: 2
2  
хорошая статья, спасибо!!!!!!!!!!!!

1  
Если файл лежит на другом сервере то не работает. Как сделать чтобы заработало? К примеру файл нужен такой http://site.ru/file.htm


Облако тэгов
Поиск
Курс валют
Россия. Курс рубля Украинских гривен (UAH) //-//
Евро (EUR) //-//
Калькулятор Доллар США (USD) //-//
Архив записей
Календарь
«  Февраль 2010  »
ПнВтСрЧтПтСбВс
1234567
891011121314
15161718192021
22232425262728
Друзья сайта
  • Праздник в подарок
  • nadymchanka.ru
  • Сайт УНЭГ
  • Сайт Демидова А.А.
  • Полезные ссылки
    Скорость Вашего интернет
    Проверка тиц и PR Copyright ZOOF © 2018
    Бесплатный хостинг uCoz