2

问候，我正在尝试将 highlight.js 与 Ajax 调用一起使用：它从 PHP 脚本中提取数据。code元素被填充，但它只设置背景和字体颜色的样式（在 devtools 中验证） ，不会出现语法突出显示。我已经htmlspecialchars在我的 PHP 脚本中清理了这些文件。通过将代码直接输入到元素中，我确实得到了正确的行为。我的 HTML 代码：

<!doctype html>
<html>
    <head>
         <meta charset="utf-8">
         <title>hljs &amp; PHP Proxy</title>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atelier-forest-dark.min.css">
         <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>    
    </head>
    <body>
        <pre>
            <code id="code" class="xml"></code>
        </pre>
        <script type="text/javascript" src="js/mjs-0000B.js"></script>
    </body>
</html>

我的Javascript：

var xhr = new XMLHttpRequest()
var target = document.getElementById('code')

xhr.onload = function(){
    if(xhr.status === 200)
        target.textContent = xhr.responseText
        console.log("Ajax request completed")
}

xhr.open('GET','https://localhost/proxy.php',true)
xhr.send(null)

window.addEventListener("load", function(event) {
    console.log("Window resources loaded");
    window.setTimeout(function(){
        hljs.highlightBlock(target)
    }, 50)
});

和 PHP：这是废话，但我可以让它与 CORS 一起工作的唯一方法......：

<?php

    $ch = curl_init();
    // set url
    curl_setopt($ch, CURLOPT_URL, "localhost/hljs-test.html");

    //return the transfer as a string
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
    // $output contains the output string
    $output = curl_exec($ch);

    // close curl resource to free up system resources
    curl_close($ch);
    echo htmlspecialchars($output);
?>

我已经解决了这里几乎所有的问题，但还没有找到解决方案。到目前为止，HTML 和 JSON 数据都导致相同的行为 - 我很难过。谢谢。

编辑：

这是来自 target.textContent 的请求输出：

&lt;!doctype html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;header&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;script src=&quot;js/0008.js&quot;&gt;&lt;/script&gt; &lt;/header&gt; &lt;body&gt;&lt;/body&gt; &lt;/html&gt;
4

1 回答 1

2

  1. htmlspecialchars($output);convert<和>其他符号，html entities这就是荧光笔无法识别您的代码的原因。你必须echo $output;改为。

  2. 你hljs.highlightBlock(target)打错地方了。

调用它xhr.onload，而不是调用它window.onload：

var xhr = new XMLHttpRequest()
var target = document.getElementById('code')

xhr.onload = function(){
    if(xhr.status === 200) {
        console.log("Ajax request completed")
        target.textContent = xhr.responseText
        hljs.highlightBlock(target)
    }
}

xhr.open('GET','https://localhost/proxy.php',true)
xhr.send(null)

// REMOVE THE FOLLOWING:
window.addEventListener("load", function(event) {
    console.log("Window resources loaded");
    window.setTimeout(function(){
        hljs.highlightBlock(target)
    }, 50)
});
于 2018-06-25T20:39:55.383 回答