JavaScript

Javascript location.href Example

In these example we’re going to discuss and learn about the location.href property. Let’s dive right in!
 
 
 
 
 
 
 
 
 
 

Definition and syntax

The location.href property is a read-only one, that returns the URL of the current page, or sets one in case it’s modified.It’s syntax goes like below:

var x = location.href;

It will return the URL of the current page, in our case being http://www.webcodegeeks.com/web-development/javascript-loc…n-href-example/.

Often, only location is written in order to get the same result. That would not be wrong, as the location object is part of the window object, and contains every information about the URL. Moreover, we can use a number of methods on this object, where among the most popular are assign(), replace() and reload().

However, the catch is that while location is an object, href is merely one of it’s properties. Some other properties of this object are host, hostname, port, and protocol (which, amusingly can all be accessed at the same time through the property origin). Also search and protocol are another couple of honorable mentions.

Usage

Let’s see which are the most common usages of the property.

Redirecting
It can be used to redirect to another page using the code snippet below:

location.href = "http://www.webcodegeeks.com/javascript/javascript-parseintstring-int-example/";

In this case we will be redirected to the URL specified by the property.

We explained above how to do redirection using location.href, which would have the same effect as using location.assign(URL). Another very typical examples are:

Forced reloading

You can force the server to reload the current page using the code like below:

location.href.reload(true);

This property is more often than not used with functions like alert() or search().

Comparing internal and external links

If you need to find out whether a link is internal or external, you can use href to do it, using the code snippet below:

$$('a[href^="http://"]').each(function(a) {
 		if(!a.get('href').contains(window.location.host)) {
 			alert("The link is external");
 		}
 	});

First, you grab all complete linked anchors and if they’re not on the domain of the current page, then an alert is put out, saying that the link is external.

Whichever way you use location.href, you’re sure to have a good time coding as it’s quite simple to use.

Download the source code

This was an example of location.href in Javascript.

Download the source code for this tutorial:

Download
You can download the full source code of this example here : locationHref

Era Balliu

Era is a Telecommunications Engineering student, with a great passion for new technologies. Up until now she has been coding with HTML/CSS, Bootstrap and other front-end coding languages and frameworks, and her recent love is Angular JS.
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Back to top button