Mabaloo - Accessing GET parameters with Javascript

Accessing GET parameters with Javascript

Written by Girish Singh

Since the URL of any webpage is fully accessible to a JavaScript, it is possible to extract get parameters with the help string manipulation function. This article explains how to access GET parameters with JavaScript and how to use them in your website.

JavaScript as it stands today is a full fledged programming language in its own. Although a proper standard is yet to be implemented in all the browsers simultaneously (majorly the IE vs. FF war) but the common features and browser detect ability offer some ways around things.

Recently on one of my ongoing assignments I had to a create a cross domain AJAX script keeping it as platform independent as possible, and that meant maximum use of good cross browser JavaScript.

Accessing get parameters with Javascript.

Get parameters are extra variables or name-value pieces of information which can be accessed by any server side programming language. They are appended to the URL of the page with a question mark beginning them and & separating them

For example www.mabaloo.com/mypage.html?myvalue=56&mypage=12

Here in the above URL two parameters are passed myvalue with a value of 56 and mypage with a value of 12. These can be accessed by any server side programming language and a part of the HTTP Request object which is sent to a particular server by a browser.

Since get parameters have a drawback of being visible to the user they are generally not used for sensitive information, however since they are so easily implemented we still find ample use of get parameters for passing non sensitive information for example In many forum application you find the id of the topic which has to displayed being passed as a get parameter. With the maturing of Iframe, which is now implemented in almost all browsers we can pass data to the server using get parameters and still keep the URL hidden from the users. It is even possible to dynamically open an Iframe on request through JavaScript and redirect it to a certain URL. All this certainly makes using get parameters a tempting situation especially in cross domain situation, where cookies and session cannot be maintained.

Coming to the main topic of my article, since the URL of any webpage is fully accessible to a JavaScript, it is possible to extract get parameters with the help string manipulation function. Below is the function I used

function get_url_param(name)
{
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null ) return "";
else return results[1];
}

The function takes the name of parameter and returns its value of an empty string if the parameter is not found in the URL of the page. For example
var myvalue = get_url_param('myvalue');
This would return the value 56 in the variable myvalue.

The use of JavaScript to access get parameters makes this a cross platform solution, meaning be it PHP, JSP, ASP or any other platform the solution will work. This data after being fetched can easily be saved to cookies (for that particular domain on which the page or the Iframe is open.) or onto session variables.

However JavaScript still cannot compete with a full fledged server side language till now and you may need to accompany this with a AJAX call to a server script.

I did not write this function, however it seemed like a saving grace when you need to communicate in a cross domain environment where cookies and session variables are not an option and still want to be platform independent.