Выполнение <script>внутри <div>, полученное AJAX - PullRequest
Новая
       27

Выполнение <script>внутри <div>, полученное AJAX

91 голосов
/ 06 января 2011

Есть 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>

Ответы [ 11 ]

61 голосов
/ 07 января 2011

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

Этот другой пост StackOverflow может быть также полезен для вас: Можно ли вставлять скрипты с помощью innerHTML? .

57 голосов
/ 29 апреля 2013

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

var arr = MyDiv.getElementsByTagName('script')
for (var n = 0; n < arr.length; n++)
    eval(arr[n].innerHTML)//run script inside div
13 голосов
/ 07 января 2011

Если вы загружаете блок скрипта в свой блок через 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 или другую библиотеку.

8 голосов
/ 04 марта 2014

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

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

4 голосов
/ 07 января 2011

Это «просто работает» для меня, используя 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/

2 голосов
/ 15 апреля 2015

Вот функция, которую вы можете использовать для анализа ответов 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;
 }
2 голосов
/ 19 февраля 2015

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

var output += '<\/script>';

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

0 голосов
/ 25 октября 2018

Мой вывод: 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>
0 голосов
/ 15 ноября 2017

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

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

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

0 голосов
/ 09 декабря 2015

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

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

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

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

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...