Code Simplified – Viral Sarvaiya

Code Simplified – Viral Sarvaiya, Web Developer Friends, dot net Developer, Sql Server Developer

Posts Tagged ‘Location Object’

How To Get URL Parts in JavaScript

Posted by Viral Sarvaiya on April 27, 2010


This JavaScript tutorial article concentrates on:

  • Obtaining the URL from the window.location object
  • Changing the current location with window.location.href and window.location.reload
  • Splitting and rebuilding URLs with Array and String splitting functions

The first step is understanding the JavaScript Location object.

The Location Object

This is a JavaScript class that is used to store URLs. It comes with properties that represent each part of the URL, and can be updated by changing the href property. The key properties that this article deals with are:

  • location.href : the full URL
  • location.protocol, location.host & location.pathname : the parts of the URL

In addition there are various methods that

  • location.reload
  • location.replace

These shall be discussed with reference to the window.location object.

The window.location Object

The window.location object is the specific object that stores the URL of the currently loaded page. If a JavaScript function changes the window.location.href property, then the page should reload with the new location.

However, this may not always be the case, and so the location.reload and location.replace methods have also been provided in the Location object. These were introduced in JavaScript 1.2, and give a little more control over the way that browsing history and current page location URLs are handled. In some cases it may not be enough to set the window.location.href, and so calling window.location.reload will force the page to be refreshed.

The window.location.replace method is used to overwrite the history entry in the browser, for the current page.

Splitting and Rebuilding URLs

The URL is stored as the following parts:

protocol://host/pathname

Each part can be accessed using the appropriate property of the Location object:

  • location.protocol : for web pages, the value http
  • location.host : for this site http://www.suite101.com
  • location.pathname : the path to a page i.e. mypages/page1.html

It is important to note that:

  • The protocol is store without the : or // that make up the whole URL
  • The host will contain a port, where appropriate
  • the pathname does not contain the leading /

So, to rebuild a URL based on the above information, code such as the following can be used:

newURL = window.location.protocol + "//" +  window.location.host + "/" + window.location.pathname;

This makes it very easy to create inline links that are context sensitive, and that refer pages that should exist on the server. For example, a site might have a tag page that collects all content that has the tag marketing associated with it. If the word marketing were to appear in a block of text, then JavaScript could be used to pre-process that block of text, and add a URL based on the current URL, but containing the reference to the marketing tag page.

One final note is that the pathname will be a / separated string, which can be split into an array of strings using the following code:

pathArray = window.location.pathname.split( '/'  );

Using this approach, it is easy to rebuild URLs, as each component will be contained in one array element. Again, however, it is necessary to put the / back:

newPathname = "";
for ( i = 0; i pathArray.length; i++ ) {
newPathname += "/";
newPathname += pathArray[i];
}
you can also retrieve the full path within code
Uri MyUri = Request.Url;

String Temp = MyUri.Scheme + @"://";
Temp = Temp + MyUri.Host;
Temp = Temp + Request.ApplicationPath;

Advertisements

Posted in ASP.NET, Javascript | Tagged: , , , , | 2 Comments »

 
%d bloggers like this: