Подсветка синтаксиса не работает после обратного звонка

Итак, я новичок в Js & php и пытаюсь распечатать фрагмент кода из функции обратного вызова

<!DOCTYPE html>
<html lang="en">
    <head>
        <script>
            function loadXMLDoc()
            {
                var xmlhttp;
                if (window.XMLHttpRequest){
                  xmlhttp=new XMLHttpRequest();
                }
                else{
                  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange=function(){
                    if (xmlhttp.readyState==4 && xmlhttp.status==200){
                        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                    }
                }

                xmlhttp.open("GET","callback_json.php",true);
                xmlhttp.send();
            }
        </script>

        <title>Simple Cross Domain Ajax</title>

      </head>
  <body>

      <h1>.....</h1>
      <h2>.....</h2>
      <button onclick="loadXMLDoc();">Get Data</button>
      <div id="myDiv"><h2>...</h2></div>

  </body>
</html>

и мой файл php идет как

<?php
    $ch = curl_init();
    $url='someurl';
    $timeout = 5;
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
    $data = curl_exec($ch);
    curl_close($ch);
    echo "<script type='text/javascript' src='syntaxhighlighter/scripts/shCore.js'></script><script type='text/javascript' src='syntaxhighlighter/scripts/shBrushJava.js'></script><link href='syntaxhighlighter/styles/shCore.css' rel='stylesheet' type='text/css' /><link href='syntaxhighlighter/styles/shThemeDefault.css' rel='stylesheet' type='text/css' />";
    echo "<pre class='brush:java;'>";
    echo $data;
    echo "</pre>";
    echo '<script type="text/javascript">SyntaxHighlighter.highlight();</script>';
 ?>

И кажется, что подсветка синтаксиса работает на моем php-файле, но не после обратного вызова... Я провел некоторое исследование и знаю, что должен использовать SyntaxHighlighter.highlight() вместо all() в коде, но я уже сделал тот. Есть ли проблемы с моей структурой кода?

Источник

1 ответ

Решение

<script> теги, добавленные innerHTML, не выполняются браузером. Вам необходимо выполнить их вручную:

var scripts = document.getElementById("myDiv").getElementsByTagName("script");
if (scripts && scripts.length) {
  for (var i =0; i<scripts.length; i++) {
    eval(scripts[i].innerHTML);
  }
}

В качестве альтернативы вы можете повторно добавить узлы сценария на страницу вместо ее оценки:

// ...
for (var i =0; i<scripts.length; i++) {
  var s = document.createElement('script');
  s.innerHTML = eval(scripts[i].innerHTML);
  document.body.appendChild(s);
}

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

Лучший способ - полностью избежать внедрения скриптов, добавив файлы Syntaxhighlighter вверху страницы и вызвав SyntaxHighlighter.highlight() после того как вы вставили HTML код.

Источник
Другие вопросы по тегам