Include PHP variables directly into js files

Question

I would like to use js code, which works with php variables. My situation now:

mainFile.php

<?
    
$myPHPvar = 1234;
    
?>

<html>
<body>
MY CONTENT

<script>

var myJSvar = <? echo $myPHPvar; ?>

</script>
<script src="myFile.js"></script>

</body>
</html>

myFile.js

// Here some js code where I access the myJSvar, which was set by $myPHPvar before
console.log(myJSvar);

This works ! But I would like to change this structure. I would like to move the myJSvar definition out from main file into the jsFile.

But If I move this line var myJSvar = <? echo $myPHPvar; ?> into the myFile.js it will not work, because this is not an php file.

Not I thought that this could be a solution:

I rename the myFile.js to myFile.php and change the code like this:

// Here some js code where I access the myJSvar, which was set by $myPHPvar before

<script>
var myJSvar = <? echo $myPHPvar; ?>
console.log(myJSvar);
</script>

and in the mainFile.php I changed <script src="myFile.js"></script> to include('myFile.php');

This works !

BUT: First question of all: Is this a good idea to do it like this? Second: The "problem" now: All my files are now php files, also the files, which includes mainly js code. That's not very beautiful, because now I can't see on the first view, which is an js file and which is a php file.

Thank you for your support !

You can rename JS file to PHP. You can gain PHP value by AJAX. You can pass PHP value via any hidden element or attribute. You can pass PHP value via URL. — pavel
– pavel, Commented Dec 1, 2021 at 6:34
You need to be clear where code runs. PHP code runs on the server. JS code runs in the browser. You can certainly configure a php file to appear to be a js file, and still parse it as a php file, but to what end? Browsers will inherently cache the file, and of course it is statically running any code in the browser. What values do you want to get from the server and why? — gview
– gview, Commented Dec 1, 2021 at 6:53
Mixing different languages into a single file is always not a good practice in production. It's much harder to maintain — Huy Phạm
– Huy Phạm, Commented Dec 1, 2021 at 7:04

tresf · Accepted Answer · 2021-12-01 06:55:43Z

1

Using PHP, echo the values to hidden HTML fields on the page.

When you know the page is done loading, read them back out using JavaScript.

Note, Ideally, you'd just make the data a separate AJAX/xhr/fetch call to a URL (JSON or XML formatted data is nice for this), but as a stop-gap, hidden fields will do the trick for basic PHP pages.

Similarly, you can echo some inline JavaScript (tags and all) and reference the variables elsewhere. This approach will work but is often referred to as "spaghetti code" because the intertwined front-end (JavaScript) and back-end (PHP) code makes for tricky debugging and does not scale well to larger code projects... months or years after, developers will find themselves scratching their heads as to where code lives, how it's generated, where new code should be placed, etc.

edited Dec 1, 2021 at 6:55

answered Dec 1, 2021 at 6:39

tresf

8,0876 gold badges46 silver badges115 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Maik Lowrey · Accepted Answer · 2021-12-01 06:34:30Z

0

You can do it like this. And there's nothing really wrong with it. You have to bring the data to the client browser somehow. You can do this with: 1. set php variables in the DOM 2. XHR call or 3. cookies

answered Dec 1, 2021 at 6:34

Maik Lowrey

17.8k8 gold badges54 silver badges101 bronze badges

2 Comments

Ajith Gopi Over a year ago

I think creating an additional request would not be required in this context since it may affect the render time and performance

Maik Lowrey Over a year ago

@AjithGopi It's just the possibilities.

Ajith Gopi · Accepted Answer · 2021-12-01 06:35:21Z

0

This can be achieved by generating the JS file dynamically... You can create a PHP file that would generate the JS dynamically like:

Note: THIS METHOD IS HIGHLY NOT RECOMMENDED. THIS IS FOR YOUR INFORMATION AND KNOWLEDGE ONLY.

myFile.php (The JS equivalent file)

console.log(123)

Your HTML file

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

But this is highly not recommended because JS files are static resources that can be cached. Using this method would request the JS file every time the page loads (where it will only be transferred at first load only if its static).

The best method is to keep the dynamic variables in your HTML and then include your static JS files which will use these variables.

answered Dec 1, 2021 at 6:35

Ajith Gopi

1,9261 gold badge17 silver badges21 bronze badges

Collectives™ on Stack Overflow

Include PHP variables directly into js files

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related