Как включить один JavaScript файл в другой?
Как мне подключить один JavaScript файл внутри другого JavaScript файла, аналогично тому, как это делается с помощью @import в CSS?
5 ответ(ов)
Да, можно динамически создать тег <script> и добавить его в HTML-документ из другого JavaScript-кода. Это позволит загрузить целевой JavaScript-файл. Вот пример реализации:
function includeJs(jsFilePath) {
var js = document.createElement("script");
js.type = "text/javascript";
js.src = jsFilePath;
document.body.appendChild(js);
}
includeJs("/path/to/some/file.js");
В этом коде функция includeJs принимает путь к JavaScript-файлу, создает новый элемент <script>, устанавливает его тип и источник, а затем добавляет его в тело документа. Таким образом, указанный файл будет загружен и исполнен в вашем приложении.
Вот синхронная версия без jQuery:
function myRequire( url ) {
var ajax = new XMLHttpRequest();
ajax.open( 'GET', url, false ); // <-- 'false' делает его синхронным
ajax.onreadystatechange = function () {
var script = ajax.response || ajax.responseText;
if (ajax.readyState === 4) {
switch( ajax.status) {
case 200:
eval.apply( window, [script] );
console.log("скрипт загружен: ", url);
break;
default:
console.log("ОШИБКА: скрипт не загружен: ", url);
}
}
};
ajax.send(null);
}
Обратите внимание, что для работы с кросс-доменными запросами сервер должен установить заголовок allow-origin в своем ответе.
Если вам нужно это сделать на чистом JavaScript, вы можете использовать document.write:
document.write('<script src="myscript.js" type="text/javascript"></script>');
Если вы используете библиотеку jQuery, вы можете воспользоваться методом $.getScript:
$.getScript("another_script.js");
Этот метод загружает и выполняет скрипт асинхронно, что может быть предпочтительным вариантом, чтобы избежать блокировки потока.
Вот обобщенная версия того, как Facebook реализует свою кнопку "Нравится":
<script>
var firstScript = document.getElementsByTagName('script')[0],
js = document.createElement('script');
js.src = 'https://cdnjs.cloudflare.com/ajax/libs/Snowstorm/20131208/snowstorm-min.js';
js.onload = function () {
// выполняем действия с динамически загруженным скриптом
snowStorm.snowColor = '#99ccff';
};
firstScript.parentNode.insertBefore(js, firstScript);
</script>
Если это работает для Facebook, значит, будет работать и для вас.
Причина, по которой мы ищем первый элемент script, а не head или body, заключается в том, что некоторые браузеры не создают эти элементы, если они отсутствуют, в то время как наличие элемента script гарантировано — это именно тот элемент. Подробнее можно прочитать по ссылке: http://www.jspatterns.com/the-ridiculous-case-of-adding-a-script-element/.
Если ваша цель — использовать функции из подключаемого JavaScript-файла, вы также можете определить глобальный объект и задать функции как элементы этого объекта. Например:
global.js
A = {};
file1.js
A.func1 = function() {
console.log("func1");
}
file2.js
A.func2 = function() {
console.log("func2");
}
main.js
A.func1();
A.func2();
Важно быть внимательным при подключении скриптов в HTML-файле. Порядок подключения должен быть следующим:
<head>
<script type="text/javascript" src="global.js"></script>
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
Таким образом, вы сможете успешно использовать функции, определенные в разных файлах, через глобальный объект.
Запись в файлы в Node.js
Как в Node.js "подключить" функции из других файлов?
Как создать файл в памяти для скачивания пользователем без использования сервера?
Ошибка "Кросс-доменные запросы поддерживаются только для HTTP" при загрузке локального файла
Как создать диалог с кнопками "Ок" и "Отмена"