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

You cant do that and dont try to as this is not a recommended approach, However you can pass php variables as a function parameters to function written in external js

Answer 2

As the others are saying, javascript doesn't have access to php variables. However, it does have access to the DOM. So, you can use php to add attributes to some page element. And then you can access those attributes with javascript.

e.g. <div id='apple' class='red'> is completely available to javascript

Answer 3

What I've seen done is let .js files run through the php interpreter. Which I can not recommend.

What I do recommend is fetching the values through AJAX and have the PHP file return the value to the JS file. Which is a much cleaner method.

Answer 4

What you likely want, is called Asynchronous JavaScript and XML (AJAX): http://www.w3schools.com/ajax/default.aspa

Basically, imagine being able to send messages from the clients JavaScript to your PHP scripts on the server. In the example you gave (externaljs.js), you would have the script ask the server what $color is, via HTTP. You can also point the script tag at a PHP script that generates the JavaScript you want. It depends on what you need to do.

It helps to have some understanding of taint checking, data verification, and security ;)

Answer 5

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

You could change it to

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

And the PHP script could just write JavaScript like that :

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

Though using AJAX like said Sepehr Lajevardi would be much cleaner

Answer 6

You can also access data from php script in Javascript (I'll use jQuery here) like this

Create input hidden field within you php file like this

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

in your javascript file:

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

This will do the job as well :)