I am wondering whether is it possible to pass any variable to external java-script file
For example
I have this
tl;dr, Yes, but you need to use a server-side langauge
This seems like a good time to explain the fineries of web server-client interaction. This is the most basic explanation:
When a client requests a file (A page, a picture or script) the server looks for it in the appropriate folder. If it isn't found it sends a familiar 404 code back, or if it is found, it sends the contents of that file back (wrapped in http headers of course).
When it comes to dynamic pages (like .php
files) the web server has to act slightly differently. Before sending them to the client, the server runs the file through a program called a parser. It then sends the output of the parser back to the client (The parser can also modify headers). The request variables (The bit after the '?' in the URL, or the variables sent by a POST request) are available to the dynamic script in some manner. In PHP they're available using the $_GET/POST globals. These variables are parsed by the server, not the client, so you can have them anywhere.
Now, specifically to your problem, when you use a <script>
tag, the client asks for the file specified by the href
attribute. This doesn't have to be a .js
file, that's just convention. The type
attribute tells the client what type of file it is. If you write PHP (or other) code to generate Javascript (even if its just include 'file1.js'
) you can use PHP to grab the sent GET/POST variables. Then the Javascript sent is executed by the client.
Sorry if this covers stuff you already know, I'm just trying to be complete
<script type="text/javascript">x = <?php echo $x; ?>;</script>
<script type="text/javascript" src="gallery.js"></script>
Now in gallery.js
, the value of the PHP variable $x
can be accessed using the JavaScript variable x
. Make sure to generate syntactically correct JavaScript.
You don't "pass variable to external script", instead you download the script, and pass the variable with regular function call, executing the script in the client machine.
If the javascript code is meant to be executed in the server, then you can either use a database to hold the values temporarily or use server-side javascript
If the javascript code is meant to be executed by a third party, unrelated to either the client or host, then you will have to store the values in a database.
Using javascript alone, you can do it this way:
<script type="text/javascript">
function $_GET(q,s) {
s = s ? s : window.location.search;
var re = new RegExp('&'+q+'(?:=([^&]*))?(?=&|$)','i');
return (s=s.replace(/^?/,'&').match(re)) ? (typeof s[1] == 'undefined' ? '' : decodeURIComponent(s[1])) : undefined;
} </script>
And then use the javascript function this way:
// this code would print "hello world" if it was at http://localhost/index.php?var1=hello&var2=world
var var1 = $_GET('var1');
var var2 = $_GET('var2');
document.write(var1 + " " + var2);
To get the parameter needed from the src tag of the javascript you can do something like this:
// get the src parameter and split it down to the search query string
var src = document.getElementById('example').src;
params = src.split('?');
var var1 = $_GET('var1','?'+params[1]);
Credit to Josh Fraser, from whom I paraphrased this answer. http://www.onlineaspect.com/2009/06/10/reading-get-variables-with-javascript/