JavaScript provides you many methods to retrieve and change the current URL which is displayed in browser's address bar. All these methods uses the Location object, which is a property of the Window object. You can create a new Location object that has the current URL as follows..

var currentLocation = window.location;
Basic Structure of a URL


<protocol>//<hostname>:<port>/<pathname><search><hash>

enter image description here

Protocol — Specifies the protocol name be used to access the resource on the Internet. (HTTP (without SSL) or HTTPS (with SSL))

hostname — Host name specifies the host that owns the resource. For example, www.stackoverflow.com. A server provides services using the name of the host.

port — A port number used to recognize a specific process to which an Internet or other network message is to be forwarded when it arrives at a server.

pathname — The path gives info about the specific resource within the host that the Web client wants to access. For example, stackoverflow.com/index.html.

query — A query string follows the path component, and provides a string of information that the resource can utilize for some purpose (for example, as parameters for a search or as data to be processed).

hash — The anchor portion of a URL, includes the hash sign (#).

With these Location object properties you can access all of these URL components

hash -Sets or returns the anchor portion of a URL.
host -Sets or returns the hostname and port of a URL.
hostname -Sets or returns the hostname of a URL.
href -Sets or returns the entire URL.
pathname -Sets or returns the path name of a URL.
port -Sets or returns the port number the server uses for a URL.
protocol -Sets or returns the protocol of a URL.
search -Sets or returns the query portion of a URL
Now If you want to change a page or redirect the user to some other page you can use the href property of the Location object like this

You can use the href property of the Location object.

window.location.href = "http://www.example.com";
Location Object also have these three methods

assign() — Loads a new document.
reload() — Reloads the current document.
replace() — Replaces the current document with a new one
You can use assign() and replace methods also to redirect to other pages like these

location.assign("http://www.example.com");

location.replace("http://www.example.com");

How assign() and replace() differs — The difference between replace() method and assign() method(), is that replace() removes the URL of the current document from the document history, means it is not possible to use the "back" button to navigate back to the original document. So Use the assign() method if you want to load a new document, andwant to give the option to navigate back to the original document.

You can change the location object href property using jQuery also like this

$(location).attr('href',url);
And hence you can redirect the user to some other url.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

ten + 7 =