Passing parameters to .js file

Question

I am developing a widget. the code for it is :

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

I want to pass paramters to a .js file like this, as we pass parameters like a query string.

<script src="../test/js.js?place=us&list=10"></script>.

These are my contents in my .js file.

var _html = '<div id="FJ_TF_Cont" style="position: relative; padding: 0; margin: 0; border-width: 0px; width: 200px;">'
+ '<iframe width="210" height="640" src="../test/content.aspx" name="FJIframe" scrolling="no" frameborder="0" marginwidth="0" marginheight="0" style="width: 210px; border-width: 0px; z-index: 1;">'
+ '</iframe>'
+ '</div>';

document.write(_html);

Please note the content of src in Iframe it contains:

src="../test/content.aspx"

now i want to pass these parameters that in js string to this src as querystring.

the final src should look like :

 src="../test/content.aspx?place=us&list=0"

I need help as i am a newbie to js.

Answer 1

Pass parameters to a function in your JS file not as a query string to the file itself.

Declare a function like

function doSomething(place, list) {
    //do something with place
    //do something with list
}

Use it in other JS as doSomething('us',10);

Any other attempt to do what you've set out to do is a hacked attempt. While you may achieve it, it's not intended design. See related posts -

Get the query string on the called javascript file
Passing Querystring style parameters into Javascript file

The general consensus is no, it can't or shouldn't be done.

--

EDIT

Some months later I learned about cache busting. This is one exceptional use case for query parameters on script files. Consider the case where a cache is set for one-year expiration. To break this time problem, changing the query parameter in the HTML href doesn't necessarily mean you have changed the content of the script but it does have the added side effect of breaking though the one-year cache expiry.

Answer 2

I think a better and easier way would be to add an extra script tag with variables. If you keep it very simple, you do do it as follows, but for a large number of variables I would make an object that contains all of them:

<script type="text/javascript">
  var place="us"; 
  var list=0
</script>
<script type="text/javascript" src=....></script>`.

If you want to do it in the src, you have two options:

1. The server adds the variables to the script. It gets the request for the script, and instead of just returning the file, it prepends it with the variables in a similar format as above. This means it's extra work for the server, because it will need an actual script to run, and the returned file is harder to cache, although it is doable (also depends on the number of variations.
2. Alternatively, you could make your script find the right tag and parse its src parameter. This is hard to do, since a script doesn't know its own name. Especially when you combine and minimize a script, the script tag might be unfindable to the script, so you can't really make this fool proof. I would discard this option right, although I've seen people try it more than once.

Answer 3

One possible solution using PHP would be this.

Create a js.php file in the folder you already have js.js and paste this:

<?php

    header('Content-type: text/javascript');
    $string = ""; $i = 0;
    foreach($_GET as $key => $value)
    {
        if($i == 0){
            $string .= "?";
            $string .= $key . '=' . $value;
            $i++;
            continue;
        }
        $string .= '&' . $key . '=' . $value;
    };
    echo "
    var _html = '<div id=\"FJ_TF_Cont\" style=\"position: relative; padding: 0; margin: 0; border-width: 0px; width: 200px;\">'
    + '<iframe width=\"210\" height=\"640\" src=\"../test/content.aspx$string\" name=\"FJIframe\" scrolling=\"no\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" style=\"width: 210px; border-width: 0px; z-index: 1;\">'
    + '</iframe>'
    + '</div>';

    document.write(_html);
    ";
    ?>

change

<script src="../test/js.js?place=us&list=10"></script> 

to

<script src="../test/js.php?place=us&list=10"></script>

And it should work.

Answer 4

I second @goleztrol's answer. Here's a smaller (single script tag) version

<script type="text/javascript">
  var place="us"; 
  var list=0;
  var script_tag = document.createElement('script');
  script_tag.setAttribute("type","text/javascript");
  script_tag.setAttribute("src", "<your-js-src>");
  document.getElementsByTagName('body')[0].appendChild(script_tag);
</script>

Hope that helps :)

Answer 5

Either your server rewrites the js depending on the parameter or set some predefined variable in javascript before the script tag.

Answer 6

In simpler words: you want the javascript file to be altered using the values the query parameters while requesting the file. Sure, this is possible. Unfortunately, this can only be done with a bit of server side processing.

I can not suggest/recommend any server side for this one, you'll need to figure this one out yourself.

The general idea is:

1. The server-side picks up the request and reads a Javascript file Template.
2. It then invokes a template processor and asks it to substitute values in the proper place. These values are retrieve from the HTTP GET parameter.
3. The server side then serves this file with proper cache headers, content-type headers to the client.