将PHP变量传递到外部JavaScript（或jQuery）文件的最有效方法

Question

我读了几篇关于这个问题的帖子，发现这是最简单的解决方案，下面是我的代码：

PHP代码中的js

<script>
    <!--// 
      var jsBaseurl = <?php echo json_encode(BASE_URL."/"); ?>;
      var jsTitle = <?php echo json_encode($h1_title); ?>;
      var jsSubtl = <?php echo json_encode($h2_title);?>;
    //-->
</script>
<script src="external.js"></script>

以及外部。js

var siteURL=jsBaseurl;
alert(siteURL+jsTitle+jsSubtl)

它运行良好，我的问题是关于彭日成和比普拉夫的以下评论：

警告：这可能会杀死你的网站。例子：

<?php $myVarValue = '<!--<script>'; ?>

详见这个问题。解决方法：利用JSON_HEX_TAG逃生

另一个缺点是会影响初始页面加载时间。-比普拉夫

我想知道Pang评论的一个简单解决方案，以及这一切对性能（页面加载时间）的影响。非常感谢！

Answer 1

很确定这不会破坏它。json_encode的全部要点是转储是安全的。

Answer 2

>

示例1
考虑这段简单的代码。

<script>
    <?php $myVarValue = 'hello world'; ?>
    var myvar = <?php echo json_encode($myVarValue); ?>;
    alert(myvar);
</script>

输出：

<script>
    var myvar = "hello world";
    alert(myvar);
</script>

它提醒Hello world。好。

示例2
让我们尝试使用

<script>
    <?php $myVarValue = '</script>'; ?>
    var myvar = <?php echo json_encode($myVarValue); ?>;
    alert(myvar);
</script>

输出：

<script>
    var myvar = "<\/script>";
    alert(myvar);
</script>

它发出警报

如您所见，斜杠（/）被正确转义为\/，

示例3
现在，考虑这个非常特殊的字符串：<代码>

<script>
    <?php $myVarValue = '<!--<script>'; ?>
    var myvar = <?php echo json_encode($myVarValue); ?>;
    alert(myvar);
</script>

输出：

<script>
    var myvar = "<!--<script>";
    alert(myvar);
</script>

令人惊讶的是，它不会发出任何警报，错误控制台中也没有任何内容。什么

如果检查JSON的规范，

^{图片改编自json.org}

要得到一个完整且解释得很好的答案，请阅读这个令人惊讶的问题

我自己做了几个简单的测试。浏览器实际上忽略了之后的所有内容

而且

• 如果你在$myVarValue中不仅有一个字符串，而且有一个像数组这样的复杂对象（"key"=

解决方案是什么？使用JSON\u HEX\u标记来转义

<script>
    <?php $myVarValue = '<!--<script>'; ?>
    var myvar = <?php echo json_encode($myVarValue, JSON_HEX_TAG); ?>;
    //                                            ^^^^^^^^^^^^^^
    alert(myvar);
</script>

输出：

<script>
    var myvar = "\u003C!--\u003Cscript\u003E";
    alert(myvar);
</script>

它发出警报

因为没有更多的

注意：如果你不打印成代码，你不需要JSON_HEX_TAG

_{[1]这里，“ok”仅表示它不受}

事实上，这很明显。如果获取$myVarValue的值所需的时间很长（例如，您正在从数据库获取大量数据），PHP将不得不等待，浏览器和用户也需要等待。这意味着初始页面加载时间更长。如果您稍后使用Ajax加载数据，他们不必等待看到初始结果，但是，Ajax调用将是一个额外的HTTP请求，因此这意味着服务器的工作负载将增加，网络的负载也将增加。

当然，每种方法都有其优缺点，所以你必须决定。我建议读这篇优秀的Q