外部のJavascriptファイルからPHPの変数にアクセスする方法

Question

このようなJavascriptでPHPの変数にアクセスができると思います。

<?php
$foo = "foo";
$bar = "bar";
?>

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

しかし、下のような外部のJavascriptのファイルを使う場合はどうでしょうか？
PHPの変数にアクセスすることはできるのでしょうか？

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

script.js
alert("color: " + "<?php echo $foo; ?>");

Answer 1

jsファイルの内部でPHPを動かすことはできないので、jsファイルを読み込む前にPHPの変数の値をJavascriptの変数にパスしておくことで可能になるかと思います。

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

なお、script.jsで下記のように取得できます。

alert("foo: " + foo);

Answer 2

javascript内にPHPのようなサーバ側で生成する値を直接記述するのはセキュリティリスクがあるため避けたほうがベターです。

それを踏まえた上でどうするか？ですが、
サーバサイドから受け取る値はDOMの属性に出力するようにして、そこからjavascriptでアクセスさせることで取得することが可能となります。

`

<div type="hidden" id="php-val" style="display:none;" data-val="<?=htmlspecialchars($foo, ENT_QUOTES, 'UTF-8')?>"></div> <script type="text/javascript" src="script.js"></script>

`

var php_val = document.getElementById('php-val'); alert('color: ' + php_val.data('val'));

Comments

[goodgood]

回答ありがとうございました！参考にさせて頂きます。