Я хотел бы узнать, можно ли добавить файл .js в другой файл .js?
Причина, по которой я хочу сделать это, - это минимизировать количество клиентов. У меня есть несколько файлов .js, уже написанных с функциями, которые нужны клиенту. Клиент будет иметь html файл, который он/она управляет с помощью файла .js include (my .js file).
Я мог бы перезаписать новый .js файл со всеми функциями в нем или, чтобы избежать двойной работы, выяснить способ записи файла .js, который включает в себя другие файлы .js.
В основном я делаю это, создаю новый элемент и присоединяю его к <head>
var x = document.createElement('script');
x.src = 'http://example.com/test.js';
document.getElementsByTagName("head")[0].appendChild(x);
Вы также можете использовать событие onload для каждого прикрепленного вами script, но, пожалуйста, проверьте его, я не уверен, что он работает в кросс-браузере или нет.
x.onload=callback_function;
Лучшим решением для времени загрузки вашего браузера будет использование серверной стороны script, чтобы объединить их все вместе в один большой файл .js. Убедитесь, что gzip/minify окончательная версия. Одиночный запрос - приятный и компактный.
В качестве альтернативы вы можете использовать DOM для создания тега <script> и установить для него свойство src, а затем добавить его в <head>. Если вам нужно дождаться загрузки этой функции, вы можете вывести остальную часть вашего javascript файла из события load в тег script.
Эта функция основана на функциональности jQuery $.getScript()
function loadScript(src, f) {
var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.src = src;
var done = false;
script.onload = script.onreadystatechange = function() {
// attach to both events for cross browser finish detection:
if ( !done && (!this.readyState ||
this.readyState == "loaded" || this.readyState == "complete") ) {
done = true;
if (typeof f == 'function') f();
// cleans up a little memory:
script.onload = script.onreadystatechange = null;
head.removeChild(script);
}
};
head.appendChild(script);
}
// example:
loadScript('/some-other-script.js', function() {
alert('finished loading');
finishSetup();
});
Нет прямого способа сделать это.
Что вы можете сделать, это загрузить script по требованию. (опять-таки использует нечто похожее на то, что упоминал Игнасио, но гораздо чище).
Проверьте эту ссылку на несколько способов: http://ajaxpatterns.org/On-Demand_Javascript
Мой любимый (не всегда применимо):
<script src="dojo.js" type="text/javascript">
dojo.require("dojo.aDojoPackage");
Закрытие Google также обеспечивает аналогичную функциональность.
Популярным методом решения проблемы сокращения ссылок JavaScript из файлов HTML является использование инструмента конкатенации, такого как Sprockets, который препроцессов и объединяет исходные файлы JavaScript вместе.
Помимо сокращения количества ссылок из файлов HTML, это также уменьшит количество обращений к серверу.
Затем вы можете запустить результирующую конкатенацию с помощью инструмента миниатюры, такого как jsmin, чтобы он был уменьшен.
Я использую метод @gnarf, хотя я возвращаюсь к document.writeln тегу <script> для IE < 7, поскольку я не мог заставить создание DOM работать надежно в IE6 (и TBH не заботился о том, чтобы поставить много усилий в нее). Ядро моего кода:
if (horus.script.broken) {
document.writeln('<script type="text/javascript" src="'+script+'"></script>');
horus.script.loaded(script);
} else {
var s=document.createElement('script');
s.type='text/javascript';
s.src=script;
s.async=true;
if (horus.brokenDOM)
s.onreadystatechange=
function () {
if (this.readyState=='loaded' || this.readyState=='complete')
horus.script.loaded(script);
};
else
s.onload=function () { horus.script.loaded(script) };
document.head.appendChild(s);
}
где horus.script.loaded() отмечает, что загружен файл javascript, и вызывает любые ожидающие невостребованные подпрограммы (сохраненные кодом автозагрузки).