Best Practices: Including PHP in your JavaScript code

Question

I'm a PHP phr34k addicted to JavaScript on the quest for some knowledge. If one were to include php code in their scripts, what would be the best method? I have provided some sample code as an example on how I would go about including PHP in my scripts.

Is this a valid method?

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP with JavaScript?</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="test.js.php"></script>
</head>
<body>
</body>
</html>

test.js.php

<?php 

$foo = 'bar';

?>

$(document).ready(function() {
    var foo = '<?php echo $foo; ?>';
    alert(foo);
});

Thanks again!

Have you tried? (SPOILER, yes it works, but you're outputting JS through PHP, not including PHP in JS) — nico
– nico, Commented Feb 1, 2011 at 17:27
@Maxym what if I want a completely interactive page but also want people to be able to login? You'll need some way of letting the JS know who's logged in at the moment... putting it in an element and getting the contents of that isn't that much of a great idea either. — goto-bus-stop
– goto-bus-stop, Commented Feb 1, 2011 at 17:33
@Reanimation: Great point. Why do work when you could just... not? — Andrew Noyes
– Andrew Noyes, Commented Feb 1, 2011 at 17:42
@Reanimation: you just use AJAX in those cases, allowing you to separate what's happening server-side from what is happening client-side. — nico
– nico, Commented Feb 1, 2011 at 17:44

Joyce Babu · Accepted Answer · 2011-02-01 17:52:15Z

5

Also set the content type header in test.js.php

header('Content-Type: text/javascript');

You can also define foo inline like

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP with JavaScript?</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
    var foo = '<?php echo $foo;?>';
</script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
</body>
</html>

test.js

$(function(){
    alert(foo);
});

edited Feb 1, 2011 at 17:52

answered Feb 1, 2011 at 17:38

Joyce Babu

20.9k13 gold badges66 silver badges102 bronze badges

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

6 Comments

Joyce Babu Over a year ago

Btw, I don't remember whether it was text/javascript or text/x-javascript.

Andrew Noyes Over a year ago

Either works. application/x-javascript is the proper way since it describes itself as non-standard, but any browser is going to accept any of them.

Andrew Noyes Over a year ago

Yes, and it's application/x-javascript I guess. My web server is serving up .js files with that MIME type too. w3schools.com/media/media_mimeref.asp

Andrew Noyes Over a year ago

Here's a little nugget of goodness: Note: According to IANA, the "text/javascript" MIME type is obsolete. The new standard is "application/javascript". However, "application/javascript" is not supported by Internet Explorer.

Joyce Babu Over a year ago

However, "application/javascript" is not supported by Internet Explorer. - As always

|

Andrew Noyes · Accepted Answer · 2011-02-01 17:43:44Z

I've seen people use the PHP interpreter to combine multiple JS source files before serving them to the client. That way the JS developers can benefit from having multiple files for more organized development but avoid sending multiple JS files (thus multiple HTTP requests) to the client.

However, these days there are several build scripts just for JavaScript. Sprockets, for example, allows you to automate building JavaScript files. Before that I considered it best practice to "compile" the JavaScript dependencies before hand. I wrote a simple Python script, for example, that would look for @include comments in JS source and order includes by their order of need. Probably better than wasting server time in exchange for a slight development convenience.

EDIT: Just take special care that you dump your variable data into the JavaScript properly. For example, if $foo is a string then you need to make sure that it's surrounded by double quotes. As is that code is going to go looking for a JavaScript variable called bar.

Andrzej Doyle · Accepted Answer · 2011-02-01 17:35:12Z

0

Unless you have a very bizarre situation, what you've described isn't really possible. PHP is evaluated on the server, while Javascript is sent to the user agent and executed by its Javascript engine (on the client side).

No user agents that I know of contain a PHP engine, so there's no way to have PHP executed on the client side. Besides, unless you're use some heinous escapes, the PHP will be executed by the server anyway before the Javascript is sent to the client.

In the latter example you give, the PHP gets evaluated on the server and the client is sent a Javascript file that looks exactly like:

$(document).ready(function() {
    var foo = 'bar';
    alert(foo);
});

So there's no PHP contained within the Javascript; rather, you're dynamically generating (normal) Javascript via PHP.

If this latter is what you intended, then yes - this works fine. The PHP engine doesn't know anything about Javascript, and just generates some text that happens to have a particular meaning to a JS-parsing client. So the presence of Javascript doesn't change anything on the PHP side, and since it's processed out, the (previous) presence of PHP doesn't change anything on the Javascript side.

(If you wanted your Javascript to execute some PHP on the client, however, that's fundamentally not possible.)

answered Feb 1, 2011 at 17:35

Andrzej Doyle

104k33 gold badges191 silver badges231 bronze badges

5 Comments

Andrew Noyes Over a year ago

You can tell the server to send .js files through the PHP interpreter before they're served to the client so that you can serve up customized JavaScript code. Notice his source files ends in .js.php.

Andrzej Doyle Over a year ago

Yes - however, those (generated/customised) JavaScript files sent to the client won't actually contain PHP, which is what I understand j3ffz is after.

Andrew Noyes Over a year ago

The .php extension is going to cause the web server to send the file through the PHP interpreter, so all that PHP code is going to be processed before being sent.

nico Over a year ago

That was exactly the point of my first comment: he's outputting JS through PHP, just as you could output HTML through PHP, nothing more.

Andrzej Doyle Over a year ago

@Andrew - I agree, that's exactly what I described in the third paragraph. Since the PHP gets interpreted by the server, what we end up is (plain old) Javascript generated by PHP; and not "PHP included in the Javascript", as asked for.

Collectives™ on Stack Overflow

Best Practices: Including PHP in your JavaScript code

3 Answers 3

6 Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related