There appears to me to be a recurring pattern I see on many web sites.  Often you will have a JavaScript library that you want to use which requires certain variables be defined in your web page.  I have seen this pattern repeated for many different widgets that you may want to include on your page.  The pattern generally looks like this: 

<script type="text/javascript" src="http://www.mywebsite.com/scriptlib.js"></script>

<script type="text/javascript">

   var obj1 = "somevalue";

   var obj2 = "someothervalue";

   myfunction(obj1, obj2);

</script>

While this works, I didn’t like the need to create the extra script block just to set a few values.  There are some cases where the second script block is needed because you need to calculate the value, but often the values are fairly static or are calculated on the server when the page is generated.  In these cases, the extra script block should not be needed.  What I really wanted was a way to compress this down to a single script block.

  

<script type="text/javascript" src="http://www.mywebsite.com/scriptlib.js?obj1=somevalue&obj2=someothervalue"></script>

Everyone I talked to suggested that I create a filehandler that runs on the server side which would accept parameters and then output the JavaScript file with the parameters embedded.  This just seemed like it was too much work for a problem that seems so simple.

After thinking through the problem a bit, I decided that the best approach was to just use a regular expression to find the parameters which could then be easily parsed.  In order to find the appropriate parameters, I need to add an id attribute to the script block so I could use getElementById to find the correct script block.  So given the following script block: 

<script id="myscript" type="text/javascript" src="http://www.mywebsite.com/scriptlib.js?obj1=somevalue&obj2=someothervalue"></script>

 

I can use some simple JavaScript to get the src attribute: 

var scriptSrc = document.getElementById("myscript").src.toLowerCase();

In searching around the Internet, I found that Hendrik Swanepoel had already provided code for easily parsing a querystring.  In reading through the blog, I found that Colin actually provided a better solution in the comments.  This was exactly what I wanted.  Now I had all the parts for a complete solution: 

function QSObject(querystring){ 

    //Create regular expression object to retrieve the qs part 

    var qsReg = new RegExp("[?][^#]*","i"); 

    hRef = unescape(querystring); 

    var qsMatch = hRef.match(qsReg); 

 

    //removes the question mark from the url 

    qsMatch = new String(qsMatch); 

    qsMatch = qsMatch.substr(1, qsMatch.length -1); 

 

    //split it up 

    var rootArr = qsMatch.split("&"); 

    for(i=0;i<rootArr.length;i++){ 

        var tempArr = rootArr[i].split("="); 

        if(tempArr.length ==2){ 

            tempArr[0] = unescape(tempArr[0]); 

            tempArr[1] = unescape(tempArr[1]); 

 

            this[tempArr[0]]= tempArr[1]; 

        } 

    } 

} 

 

var scriptSrc = document.getElementById("myscript").src.toLowerCase();

qs = new QSObject(scriptSrc); 

 

document.write("obj1=" + qs.obj1 + "<br />");

document.write("obj2=" + qs.obj2 + "<br />");

Maybe someone else has a better solution, but this seemed to work for my purposes.