Доброго времени суток.
Работая с ajax'ом столкнулся с проблемой подгрузки javaScript файлов.
Сайт предполагает быть большим, все файлы сразу загружать не хочется, а хочется по мере их надобности.
Нашел на просторах интернета для этого такую функцию:
var jsScriptsLoad = new Array;
function dhtmlLoadScript(url)
{
if(jsScriptsLoad.join().search(url) == -1){
jsScriptsLoad[jsScriptsLoad.length] = url;
var e = document.createElement("script");
e.src = url;
e.type="text/javascript";
document.getElementsByTagName("head")[0].appendChild(e);
}
}
Функция отличная. Подгружаю я ей файл js.js:
function a(){
alert("");
}
Следующим образом:
dhtmlLoadScript("js.js");
Вписываю на страницу элемент, по клику на который вызывается функция из подгружаемого файла:
<p onclick="a();">a</p>
Открываю страницу, кликаю по "а", функция отрабатывает, алерт вылезает. Отлично
А теперь проблема! Если я вызываю функцию на следующей строчке после подгрузки файла:
dhtmlLoadScript("js.js");
a();
то при загрузке документа я вижу в консоле: "Uncaught ReferenceError: a is not defined".
Сразу мысль. файл не успел подгрузиться. Пробую такую конструкцию:
$.when(dhtmlLoadScript("js.js")).done(function(){
a();
});
Ничего не выходит. Помогите пожалуйста, бьюсь не один час.
Полный листинг файлов:
index.html:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript">
var jsScriptsLoad = new Array;
function dhtmlLoadScript(url)
{
if(jsScriptsLoad.join().search(url) == -1){
jsScriptsLoad[jsScriptsLoad.length] = url;
var e = document.createElement("script");
e.src = url;
e.type="text/javascript";
document.getElementsByTagName("head")[0].appendChild(e);
}
}
$(document).ready(function() {
$.when(dhtmlLoadScript("js.js")).done(function(){
a();
});
});
</script>
<p onclick="a();">a</p>
js.js:
function a(){
alert("");
}
