从外部JavaScript文件访问PHP变量

67

我可以像这样使用Javascript访问PHP变量:

<?php
    $fruit = "apple";
    $color = "red";
?>

<script type="text/javascript">
    alert("fruit: " + "<?php echo $fruit; ?>"); // or shortcut "<?= $fruit ?>"
</script>

但是如果我想使用外部JS文件怎么办:

<script type="text/javascript" src="externaljs.js"></script>

externaljs.js:

alert("color: " + "<?php echo $color; ?>");

是的,你可以。看我的例子。 - FFish
12个回答

121

你并不真正访问它,而是在服务页面时将其插入JavaScript代码中。

但是,如果你的其他JavaScript不来自外部源,你可以这样做:

<?php
    $color = "Red";
?>
<script type="text/javascript">var color = "<?= $color ?>";</script>
<script type="text/javascript" src="file.js"></script>

然后在file.js中像这样使用颜色:

alert("color: " + color);

2
这正是我所想的,也是我刚想到的。+1 给 Don。 - FFish
1
应该是 var color = "<?= $color ?>"; - Mark L
2
如果不是因为它在较低的脚本标签中创建了一个全局变量,我会对这个解决方案感到满意。 - Kacy
我认为它必须是全局的才能在外部js文件中使用。 - Adam Joseph Looze
@mesqueeb 阅读此内容:https://dev59.com/C2Ag5IYBdhLWcg3wU5gS -- 直接将内容回显到JS变量中是不安全的。 - Sterling Archer
显示剩余4条评论

17

你也可以像这样(我会使用jQuery)从php脚本中访问数据:

在你的php文件中创建一个隐藏的输入字段,如下所示:

<input type="hidden" id="myPhpValue" value="<?php echo $myPhpValue ?>" />

在你的 JavaScript 文件中:

var myPhpValue = $("#myPhpValue").val();
//From here you can the whaterver you like with you js Value
if(myPhpValue != ''){
//Do something here
}

这个也可以完成工作 :)


如果您使用ajax,这将无法工作。PHP需要页面刷新,而ajax则相反。 - Dexter

8
我看到的做法是让.js文件通过php解释器运行。我不能推荐这样做。 我建议的方法是通过AJAX获取值,并使PHP文件将值返回给JS文件。这是一种更清洁的方法。

8
太棒了!附上实际代码的例子胜过千言万语。请发布代码! - deckoff
@Ólafur Waage,您能否添加代码说明如何实现它? - user1097772
1
通过 AJAX 获取值的代价很高。如果你仅在最开始需要一次从服务器获取数据,那么就没有必要这样做。 - Kacy

6

首先,您必须了解没有任何程序可以访问其他程序的变量。

一旦您了解了这一点,其余的就很简单了。
您可以在主文件中设置一个js变量,然后包含您的外部js文件,或者将此外部js文件作为动态文件由PHP生成。


谢谢您的澄清。我使用了您的第一个解决方案。<script type="text/javascript">_fruit = "<?= $fruit; ?>";</script>而不是<script type="text/javascript" src="externaljs.js"></script>,并且在externaljs.js内部,我使用alert(_fruit)进行访问。 - FFish
FFish…不错的代码示例。我想补充一点,JavaScript变量不需要以下划线作为前缀,因为它存在于与PHP变量不同的领域,所以不会发生冲突。 - Carl

4
你可能需要的是异步JavaScript和XML(AJAX)技术: http://www.w3schools.com/ajax/default.aspa 基本上,想象一下能够从客户端的JavaScript向服务器上的PHP脚本发送消息。在你提供的示例(externaljs.js)中,你可以让脚本通过HTTP询问服务器$color是什么。你也可以将脚本标记指向生成所需JavaScript的PHP脚本。这取决于你需要做什么。
了解污点检查、数据验证和安全性会有所帮助 ;)

3
正如其他人所说,JavaScript无法访问PHP变量。但是,它可以访问DOM。因此,您可以使用PHP向某些页面元素添加属性。然后,您可以使用JavaScript访问这些属性。
例如:<div id='apple' class='red'>是完全可供JavaScript使用的。

请原谅我对Javascript / jQuery的理解不够深入,但是使用数据类型不是可以实现吗?
然后通过数据选择器检索它$('[data-color]').val();或类似的方式? - dj.cowan
@dj.cowan 是的,现在使用数据类型会是首选方法。但您仍然无法直接访问php变量。您只能访问它们在生成html时所持有的值。 - dnagirl

2

唐氏方案不错,而且如果你想在外部JavaScript中使用PHP数组,可以使用以下方法:

PHP:

<?php
    $my_php_array = [];
?>     

HTML:

<script type="text/javascript"> var my_js_array = <?php echo json_encode($my_php_array);?> ; </script>
<script src = "../public/js/my-external-js.js"></script>

Javasript:(现在您可以像普通的Javascript数组一样使用该数组)

 my_js_array[0] 
 my_js_array.length

1

2017-2018及以上解决方案:

由于目前还没有人提出并且我猜也没有人想到将base64_encodejson_encode函数结合起来使用,你甚至可以像这样发送PHP数组变量:

index.php

<?php
      $string = "hello";
      $array = ['hi', 'how', 'are', 'you'];
      $array = base64_encode(json_encode($array));

那么你可以通过查询字符串的参数来加载所需的js文件,如下所示:

echo '<script type="text/javascript" src="js/main.php?string='.$string.'&array='.$array.'">';

例如,js/main.php 将会是这样的。您可以通过这种方式测试您的变量:

js/main.php

    <?php
    if ($_GET['string']) {
        $a = $_GET['string'];
    }
    if ($_GET['array']) {
        $b = $_GET['array'];
    }
    $b = json_decode(base64_decode($b));

    echo 'alert("String $a: + '.$a.'");';
    echo 'alert("First key of Array $array: + '.$b[0].'");';
    exit();
    ?>

当您打开index.php时,以下内容将输出。因此,您可以看到,即使不打开js/main.php,您仍然可以获得其中的JavaScript功能。

enter image description here


1
<script type="text/javascript" src="externaljs.js"></script>

你可以将它改为:

<script type="text/javascript" src="externaljs.php"></script>

而 PHP 脚本可以像这样编写 JavaScript:

<?php
$fruit = "apple";
echo 'var fruit = '.json_encode($fruit);
...

虽然像Sepehr Lajevardi所说的那样使用AJAX会更加简洁


我认为应该添加一个正确的Content-type头部。 - Your Common Sense
经典的JavaScript文件没有类型,它们是纯文本文件,引用它们URL的标签定义了它们在浏览器中的使用类型。 - Serty Oan

1
你可以像引入其他内容一样使用include()函数:
<?php
    $fruit = "apple";
    $color = "red";
?>

<script type="text/javascript">
    <?php include('/path/to/your/externaljs.js'); ?>
</script>

这将基本上将外部文件呈现为内联js。这里的主要缺点是您失去了浏览器缓存的潜在性能优势。另一方面,它比在javascript中重新声明php变量要容易得多。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接