Categories:

External JavaScript and PHP

One of the lesser known sides of external JavaScript is the ability to reference a PHP file instead of the familiar .js file. At first such an notion may seem strange, even impossible; after all, who among us isn't familiar with that barrier dividing server side and client side scripts that prohibit the two from interacting? Well, it turns out superficial exchange is allowed. Using external JavaScript, you'll see how PHP and JavaScript can work together in a way you may not have thought possible, and to the great benefit of JavaScript.

The syntax

The syntax to referencing a PHP file using external JavaScript is consistent enough with what we already know:

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

where "myscript.php" is either an absolute or relative path to a PHP script instead of the usual .js file. You can even pass parameters to the PHP script through the URL string:

<script type="text/javascript" src="myscript.php?id=3&name=george"></script>

Your PHP script can then get to these parameters using the global variable $HTTP_GET_VARS[]. So you're probably wondering at this point: "So what's the catch?" Well, there is no catch really, just a few limitations. Since we are invoking the PHP script indirectly and via JavaScript, the final output of the PHP script needs to be valid JavaScript. Think of it as a dynamic .js file, bounded by the same limitations as a regular .js file. A normal PHP script called inside a PHP page can output raw HTML and modify the source code of the page. The JavaScript invoked version obviously cannot, but don't worry, there's plenty of what it can do.

Here's a basic example of a PHP script- ip.php- being called by external JavaScript to do something that JavaScript alone cannot:

<?
//"ip.php" example- display user IP address on any page
Header("content-type: application/x-javascript");
$serverIP=$_SERVER['REMOTE_ADDR'];
echo "document.write(\"Your IP address is: <b>" . $serverIP . "</b>\")";
?>

And once called by external JavaScript:

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

Output:

In the above, we have a normal PHP script that writes out the IP address of the visitor when referenced using external JavaScript, with two important details:

  • A JavaScript header is sent at the very beginning to inform the page that our PHP script is outputting a JavaScript file.
  • Since the final output of our PHP script needs to be a valid .js file, whatever the PHP outputs must conform to valid JavaScript syntax. So to display the IP address from the perspective of JavaScript, the echo function above includes "document.write()" as part the content to send back to the page.

Notice how I didn't output the JavaScript script tag itself (<script></script>), as just like inside a regular .js file, this isn't required nor valid.

The ability to reference a PHP script inside your external JavaScript can be very useful! It means your JavaScript now has access to once exclusive information on the server side, whether it's the server time, the visitor's IP address, a list of all the files within a certain directory, or mySQL database information. Furthermore, even regular HTML pages can utilize this information, since all that's required is a JavaScript on these pages that in turn references the desired PHP script on your server or beyond. Want to display the visitor's IP address on a static html page- any html page? The above example already does that.

Ok, time to put our new found discovery to better use- how about a JavaScript slideshow that automatically rotates/displays all images within a directory?