Posted in JavaScript, PHP

[PHP] 外部のJavaScriptファイルでPHPの変数を参照する方法

   Published Date: 2017年1月8日

PHPから外部のJavaScriptに値を渡す方法についてです。PHPファイルの中に直接JavaScriptを記載していて、JavaScriptファイルを外部に持っていこうとすると、値が参照できなくなります。外部JavaScriptに値を渡すには少し工夫が必要です。

準備

まず、公開ディレクトリに「sample.js」というファイルを作り、その中に下記のソースを記載します。

alert("値: " + sample);
console.log(sample);

値がうまく渡った場合、アラートとコンソールに値が出力されるようになります。

テキスト・数値等の渡し方

配列ではないテキストや数値等の渡し方は簡単です。

<?php
    $sample ='abc';//PHPで配列を生成
?>

<script type="text/javascript">
var sample='<?php echo $sample; ?>';
</script>

<script type="text/javascript" src="sample.js"></script>//外部のJavaScriptファイルの読み込み

6行目でJavaScriptの変数 sample に PHPの変数の値を代入しています。（右辺はPHPで値をechoするだけ）
これだけでPHPからJavaScriptに値を渡すことができます。

配列の渡し方

配列データを渡すには一工夫必要になります。

<?php
$sample = array('abc','def');//PHPで配列を生成
$varJsSample=json_encode($sample);//JavaScriptに渡すためにjson_encodeを行う
?>

<script type="text/javascript">
var sample=JSON.parse('<?php echo $varJsSample; ?>');//jsonをparseしてJavaScriptの変数に代入
</script>

<script type="text/javascript" src="sample.js"></script>//外部のJavaScriptファイルの読み込み

3行目でPHPの配列をjsonに変換しています。変換は json_encode(変数）とするだけなので簡単です。
7行目でjson化されたデータをパースしてJavaScriptの変数に代入しています。



Author: webmaster