Почему браузер не анализирует код JS в файле, загруженном AJAX?

Question

У меня есть 2 файла, первый файл содержит HTML и часть JS.Второй файл является основным и загружает первый файл через XmlHttpRequest.

Первый файл выглядит так:

<div>
  My HTML contents
</div>

<script id="my_js_block">
function my_function() {
  alert(9);
}
</script>

Второй файл выглядит так:

<div id="div_ajax_content">
  &nbsp;
</div>

<script>
function load_ajax_content() { 
  //synchronously with XmlHttpRequest(...,...,false);
  //...load and throw the first file into 'div_ajax_content'
}

load_ajax_content();
my_function();  <-- fails here
</script>

Как решить этот вопрос?

Answer 1

Ajax является асинхронным.Ваш код пытается вызвать my_function() до того, как XMLHttpRequest завершится.Сделайте это вместо:

<script>
function load_ajax_content() {
    //...load and throw the first file into 'div_ajax_content'
    // then,
    my_function();
}

load_ajax_content();
</script>

---

Хорошо, теперь ваш вызов ajax является синхронным.Вы можете анализировать возвращенный HTML для тегов <script> и обрабатывать их отдельно, но это не очень красиво:

function load_ajax_content() {
    //...load and throw the first file into 'div_ajax_content'
    // then grab the script nodes one-by-one
    var scriptElts = document.getElementById('div_ajax_content').getElementsByTagName('script'),
        scriptElt,
        propName; // http://www.quirksmode.org/dom/w3c_html.html#t07

    if (scriptElts.length) {
        propName = scriptElts[0].textContent ? 'textContent' : 'innerText';
    }

    for (var i=0; i<scriptElts.length; i++) {
        scriptElt = document.createElement('script');
        scriptElt[propName] = scriptElts[i][propName];
        document.body.appendChild(scriptElt);
    }

    // finally,
    my_function();
}

... или вы можете просто использовать библиотеку, такую ​​как jQuery ,которая автоматически решает эту проблему (и многие другие!) для вас.

Answer 2

Добавление скрипта через innerHTML НЕ запускает скрипт.Поэтому ваша функция не определяется, а значит, и ошибка.

Вместо этого я предлагаю загрузить HTML и JS по отдельности и либо добавить JS, используя методы DOM, чтобы разместить тег <script> на странице, либо eval() выполнить возвращенное содержимое файла.

Answer 3

После Kolink я нашел довольно забавный метод, но он работает!

load_ajax_contents();
eval(document.getElementById("my_js_block").innerHTML);
my_function();

Однако, чтобы эти функции оценивались с помощью 'eval ()' global , все функции в первом файле должны быть объявлены как переменные, например:

//this works!
my_function = function() {
  alert(9);
}

а не:

* * 1010

, а также нет:

//this makes the variable local to the context where eval() is called
var my_function = function() {
  alert(9);
}