Существует div, называемый «Content»:

<div id="content"></div>

Он должен быть заполнен данными из файла PHP AJAX, включая <script> тег. Однако скрипт внутри этого тега не выполняется.

<div id="content"><!-- After AJAX loads the stuff that goes here -->
   <script type="text/javascript">
     //code
   </script>
   <!-- More stuff that DOES work here -->
</div>

JavaScript, вставленный как текст DOM, не будет выполняться. Однако вы можете использовать динамический шаблон сценария динамический сценарий pattern для достижения вашей цели. Основная идея состоит в том, чтобы переместить сценарий, который вы хотите выполнить, во внешний файл и создать тег сценария, когда вы получите ответ Ajax. Затем вы устанавливаете атрибут src вашего тега скрипта и вуаля, он загружает и выполняет внешний скрипт.

Объяснение MDN Можно ли вставлять сценарии с помощью innerHTML? Глядя на вывод

Я использовал этот код, он работает нормально

var arr = MyDiv.getElementsByTagName('script')
for (var n = 0; n < arr.length; n  )
    eval(arr[n].innerHTML)//run script inside div

Если вы загружаете блок скрипта в ваш div через Ajax, например:

<div id="content">
    <script type="text/javascript">
    function myFunction() {
      //do something
    }
    myFunction();
    </script>
</div>

… он просто обновляет DOM вашей страницы, myFunction () не обязательно позвонить.

Вы можете использовать метод обратного вызова Ajax, такой как метод в jQuery ajax () , чтобы определить, что выполнять после завершения запроса.

То, что вы делаете, отличается от загрузки страницы с включенным в нее JavaScript с самого начала (которая выполняется).

Пример того, как использовать успешный обратный вызов и обратный вызов ошибки после извлечения некоторого содержимого:

  $.ajax({
    type: 'GET',
    url: 'response.php',
    timeout: 2000,
    success: function(data) {
      $("#content").html(data);
      myFunction();
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      alert("error retrieving content");
    }

Другой быстрый и грязный способ — использовать eval () для выполнения любого кода сценария, который вы вставили в виде текста DOM, если вы не используете не хочу использовать jQuery или другую библиотеку.

Вот скрипт, который оценивает все теги скрипта в тексте.

function evalJSFromHtml(html) {
  var newElement = document.createElement('div');
  newElement.innerHTML = html;

  var scripts = newElement.getElementsByTagName("script");
  for (var i = 0; i < scripts.length;   i) {
    var script = scripts[i];
    eval(script.innerHTML);
  }
}

Просто вызовите эту функцию после получения вашего HTML с сервера. Будьте осторожны: использование eval может быть опасным.

Демонстрация: http://plnkr.co/edit/LA7OPkRfAtgOhwcAnLrl?p=preview

Это «просто работает» для меня с использованием jQuery, если вы не пытаетесь добавить подмножество, возвращенное XHR HTML к документу. (См. Этот отчет об ошибке , показывающий проблему с jQuery.)

Вот пример, показывающий, как он работает:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>test_1.4</title> 
    <script type="text/javascript" charset="utf-8" src="jquery.1.4.2.js"></script> 
    <script type="text/javascript" charset="utf-8"> 
        var snippet = "<div><span id='a'>JS did not run</span><script type='text/javascript'>"  
        "$('#a').html('Hooray! JS ran!');"  
        "</script></div>";
        $(function(){
            $('#replaceable').replaceWith($(snippet));
        });
    </script> 
</head> 
<body> 
    <div id="replaceable">I'm going away.</div> 
</body> 
</html>

Вот эквивалент вышеупомянутого: http://jsfiddle.net/2CTLH/

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

var output  = '</script>';

То же самое относится и к любым закрывающим тегам, таким как тег формы.

Вот функция, которую вы можете использовать для анализа ответов AJAX, особенно если вы используете minifiedjs и хотите, чтобы он выполнял возвращенный Javascript, или просто хотите проанализировать сценарии без добавления их в DOM, она также обрабатывает ошибки исключений. Я использовал этот код в библиотеке php4sack, и он полезен за пределами библиотеки.

function parseScript(_source) {
    var source = _source;
    var scripts = new Array();

    // Strip out tags
    while(source.toLowerCase().indexOf("<script") > -1 || source.toLowerCase().indexOf("</script") > -1) {
        var s = source.toLowerCase().indexOf("<script");
        var s_e = source.indexOf(">", s);
        var e = source.toLowerCase().indexOf("</script", s);
        var e_e = source.indexOf(">", e);

        // Add to scripts array
        scripts.push(source.substring(s_e 1, e));
        // Strip from source
        source = source.substring(0, s)   source.substring(e_e 1);
    }

    // Loop through every script collected and eval it
    for(var i=0; i<scripts.length; i  ) {
        try {
          if (scripts[i] != '')
          {         
            try  {          //IE
                  execScript(scripts[i]);   
      }
      catch(ex)           //Firefox
      {
        window.eval(scripts[i]);
      }   

            }  
        }
        catch(e) {
            // do what you want here when a script fails
         // window.alert('Script failed to run - ' scripts[i]);
          if (e instanceof SyntaxError) console.log (e.message ' - ' scripts[i]);
                    }
    }
// Return the cleaned source
    return source;
 }

У меня была похожая статья здесь: addEventListener load на ajax load БЕЗ jquery

Как я решил, это было вставить вызовы функций в мою функцию stateChange. Страница, которую я настроил, состояла из 3 кнопок, которые загружали 3 разные страницы в область содержимого. Поскольку мне нужно было знать, какая кнопка была нажата для загрузки страницы 1, 2 или 3, я мог легко использовать операторы if / else, чтобы определить, какая страница загружается, а затем какую функцию запустить. Я пытался зарегистрировать разные слушатели кнопок, которые работали бы только при загрузке конкретной страницы из-за идентификаторов элементов ..

так …

если (страница1 загружается, pageload = 1), запустите функцию registerListeners1

, то же самое для страницы 2 или 3.

Это сработало для меня, вызвав eval для каждого содержимого скрипта из ajax .done:

$.ajax({}).done(function (data) {      
    $('div#content script').each(function (index, element) { eval(element.innerHTML); 
})  

Примечание: я не записывал параметры в $ .ajax, который у вас есть настроить в соответствии с вашим AJAX.

Мой вывод: HTML не допускает теги NESTED SCRIPT. Если вы используете javascript для внедрения HTML-кода, включающего теги script, не будет работать, потому что javascript также входит в тег script. Вы можете проверить это с помощью следующего кода, и вы увидите, что он не будет работать. Сценарий использования: вы вызываете сервис с AJAX или аналогичным, вы получаете HTML, и вы хотите сразу внедрить его в HTML DOM. Если введенный HTML-код имеет внутри теги SCRIPT не будет работать.

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"></head><body></body><script>document.getElementsByTagName("body")[0].innerHTML = "<script>console.log('hi there')</script>n<div>hello world</div>n"</script></html>

Еще одна вещь, которую нужно сделать, это загрузить страницу с помощью сценария, такого как:

<div id="content" onmouseover='myFunction();$(this).prop( 'onmouseover', null );'>
<script type="text/javascript">
function myFunction() {
  //do something
}
myFunction();
</script>
</div>

Это загрузит страницу, затем запустит сценарий и удалит обработчик событий после запуска функции. Это не запустится сразу после загрузки ajax, но если вы ждете, когда пользователь введет элемент div, это будет работать просто отлично.

PS. Требуется Jquery