Introduction to Location Object in JavaScript


In this article, we will look into another built-in JavaScript object named as location. Location object provides us, information about the currently loaded URL details like host name, port and protocol etc. We can get complete details of a URI by using this object. Let's dig into this object deeply by an ASP.NET sample. Create an ASP.NET web application in VS 2008 and name it as JSLocationSample.

Now, design the Default.aspx as shown below:

11.gif

I added few buttons and a textbox to get the details of the currently loaded URL like host name, port number, query string parameters etc. Now, add below JavaScript to Default.aspx:

<
script type="text/javascript">
        function showURLInfo()
        {
            for (var property in location)
            {
                document.getElementById("txtURL").value += property + "-->" + ((location[property] == "") ? "Not Present" : location[property]) + "\r\n";
            }
        }
        function reloadPage()
        {
            location.reload();
        }
        function navigateNext()
        {
            location.assign("NewPage.aspx?Name=YYY");
        }
        function getQueryString()
        {
            if (location.search)
            {
                var params = location.search.split('&');
                for (var i = 0; i < params.length; i++)
                {
                    var param = params[i].split('=');
                    alert(param[0].toString().replace('?', '') + ":" + param[1]);
                }
            }
        }
</script>

On click of reload button, we can reload the page using location's reload().

On click of Next Page button, we can move to next page using location's assign().

On click of Show Info button, we can get details of the loaded URL.

On click of Get parameters button, we can get the details of the query string using location's search property.

Add some few more pages as shown in below figure and set StartUp.aspx as start page and run the application:

2.gif

The output will be shown below:

3.gif

We can use location's assign() to move to another page without using server side methods like response's Redirect or server's Transfer.

By using location object, we can access below properties of the browser's URI:

Property Name Description
host  Host
hostname  Host Name
href  URL
pathname --
port  Port Number
protocol  Protocol Name
search Query String Parameters
Methods:
reload() Reload the page
assign() Navigate to new page in current window

I am ending the things here. I hope this article will be helpful for all.