Как интерпретировать код JavaScript, отправленный через AJAX?

Question

У меня есть код JavaScript, встроенный в HTML-файл шаблона. Когда я загружаю этот шаблон через ajax и внедряю его в DOM, код javascript не работает.

Кто-нибудь знает, как заставить этот код JavaScript работать как обычно?

Спасибо миллион!

Answer 1

Вы можете использовать библиотеку js, например, mootools. У него есть возможность выполнять код JavaScript на контенте, загруженном через AJAX.

По сути, он анализирует html в поисках тегов сценария, извлекает эти сценарии и выполняет его с помощью window.execScript (при наличии) или внедрения сценария в DOM. Я думаю, что когда у вас есть содержимое сценариев в переменной, вы можете просто использовать eval.

Answer 2

eval () - это обычно то, как вы запускаете JS, вставленный в страницу - в противном случае, если он каким-то образом подключен к DOM, вам нужно вызвать его после того, как он написан, вызывая метод или вызывая событие.

Answer 3

Ваш Javascript, вероятно, называет document.write.
Если так, то нет решения; вам нужно переписать Javascript.

РЕДАКТИРОВАТЬ : Вам нужно вручную запустить вставленные блоки <script>, используя eval.

jQuery может сделать это автоматически:

$('#someId').html(yourHtmlString);

Answer 4

Существует несколько подходов к решению этой проблемы. Я не уверен, как ваш js связан с файлом шаблона, который вы упомянули, но следующие ответы применимы, если вы хотите выполнить файл JS, полученный в ответ на запрос XHR.

Соль 1 с использованием Eval:

xhr.onreadystatechange = function(){
 if( xhr.readyState === 4 ){
    eval ( xhr.responseText );
 }
}

Sol 2 с использованием динамического впрыска

xhr.onreadystatechange = function(){
  if ( xhr.readystate === 4 ){
    var head = document.getElementsByTagName("HEAD")[0];
    var script = document.createElement("SCRIPT");
    script.text = xhr.responseText;
    head.appendChild(script);
  } 
}

Это создаст элемент script в заголовке и установит для него текст ответа AJAX. При этом ваш JS будет проанализирован, но не будет выполнен. Если вы хотите, чтобы он выполнялся мгновенно, вы можете сознательно вызвать его в последней строке ответа, как этот:

//JS that you fetch
function A(){
}

// call A here so that it executes when this script is injected.
A()

Единственная проблема с вышеуказанными решениями - это то же ограничение домена, которое XHR приносит вам. Если вы хотите динамически включать скрипты из разных доменов, вы можете использовать что-то еще более простое:

var scr = document.createElement("SCRIPT");
scr.src = "dynamically set this to the external script source"
document.getElementsByTagName("HEAD")[0].appendChild(scr);

Существуют и другие подходы, такие как подход IFRAME, как упоминалось в других ответах.

Answer 5

Вы можете разделить его на два файла, один в формате .html, а другой в формате .js, загрузить оба файла и проверить js.

Или вы можете заставить JS написать html-страницу, так что вам не нужна html-страница.

Answer 6

Просто загрузите ваш ajax-шаблон в iframe, и ваш шаблон будет содержать базовую HTML-структуру. Затем независимо от того, какие блоки скриптов вы включите, они будут выполнены.