回调后语法高亮显示不起作用

时间:2012-11-01 19:20:52

标签: php javascript syntax-highlighting

所以我是Js& amp;的新手。 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 个答案:

答案 0 :(得分:1)

浏览器不会执行innerHTML添加的

<script>标记。您需要手动执行它们:

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()来完全避免脚本注入。