Access PHP var from external javascript file

Question

I can access a PHP var with Javascript like this:

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

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

But what if I want to use an external JS file:

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

externaljs.js:

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

Answer 1

externaljs.js is a static file. Of course it can't access PHP data. The only way to pass PHP data to a js file would be to physically alter the file by writing to it in your PHP script, although this is a messy solution at best.

Edit in response to Ólafur Waage's answer: I guess writing to the js file isn't the only way. Passing the js through the PHP interpreter never crossed my mind (for good reason).

Answer 2

2017-2018 and above solution:

Since nobody bringed it up yet and I guess no one thought of combining the functions base64_encode and json_encode yet, you could even send PHP Array variables like that:

index.php

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

Then you could just load your desired js file with the parameter for a query string like this:

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

Then js/main.php will look like this for example. You can test your variables this way:

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();
    ?>

The following will then output when you open your index.php. So you see, you don't open js/main.php and you still got the javascript functionality from it.

Answer 3

You don't really access it, you insert it into the javascript code when you serve the page.

However if your other javascript isn't from an external source you can do something like:

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

and then in the file.js use color like so:

alert("color: " + color);

Answer 4

First of all you have to understand that no program can actually have access to the other program's variable.

When you realize that, the rest is simple.
You can either set up a js variable in the main file and then include your external js, or make this external js dynamic, generated by PHP as well

Answer 5

Don solution is good, furthermore if you want to use a php array in an external javascipt this can help you:

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: (You can now use the array like a normal Javascript array)

 my_js_array[0] 
 my_js_array.length

Answer 6

You can include() them just as you would anything else:

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

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

This will basically render the external file as inline js. The main disadvantage here is that you lose the potential performance benefit of browser caching. On the other hand, it's much easier than re-declaring your php variables in javascript.