Location Objects and Hrefs
Although the location object has several important properties, the href property is one of the most important ones. Short for “hypertext reference,” href contains a string that represents the window object’s complete URL. If you’d like to determine an href’s value, use the following code:
var myLocation = location.href;
It’s just that simple. If you were viewing the White House website, the myLocation variable would contain the site’s URL.
URLS: Complex and Simple
When many hear the word “URL,” they may think of simple strings such as http://www.google.com. While that is a valid value, URLs can be much more complex and contain special characters and words that may not make sense. For example, you might see a URL such as the following:
While the basic URL is www.google.com, other keywords and characters appear after the word “com.” They represent extra querystring information that web pages may pass among themselves. If you ever develop web pages that transmit this type of data, you can view it all by checking the location.xref property. Your code can then parse the information as needed.
location.href = "target_URL";
You can also change href so that it points to a location on the same page you’re viewing. The following code does that:
location.href = "myPage.html#section1";
This code assumes that your myPage.html document has a named anchor whose name is section1. A named anchor is a hyperlink that looks similar to the one shown below:
Named anchors are useful because they enable one web page to direct people to specific locations within another web page as shown in the previous example. Named anchors are are also helpful when you’d like to add a table of contents to a web page. Here’s one way to do that:
- Add named anchors to the bottom of an HTML document. If it’s a sales page, anchor names might include sales, descriptions and photos.
- Add hyperlinks throughout your page that point to those named anchors. Hyperlinks also have href properties and you can set their values the same way you set the location object’s href value.
Location Object Uses
In addition to href, the location object has additional properties and methods you may find helpful. For instance, you can reload the current web page using the following code:
Use the reload method with caution because users may lose information they’ve entered if you refresh their web pages without warning. However, you may find the reload method handy when you’d like to refresh a web page to clear its cache.
You may not need to reference all the location object’s properties, but here is a list of them:
- Search – Examine this property when you’d like to see the querystring part of a URL.
The search part of a URL is the text that begins with a question mark. This is the information websites parse to transfer information between themselves.
- Port – Retrieves or sets a URL’s port number.
- Host – Retrieves or sets the port number and the hostname.
- PathName – This property sets or returns the URL’s pathname.
Hyperlink Href Uses
As seen in the previous section, the anchor tag has an href attribute you can query and set. Some web developers use the document.getElementsByTagName method to retrieve all links on a web page as shown below:
var links = document.getElementsByTagName("a");
The Document Object Model
The location object is one of many that make up the Document Object Model. The Window object, for instance, represents the browser you use. It has its own properties and methods. For instance, you can open a new window using the open method.Instead of changing the location object’s href property, you could use the open method to show users a new URL without changing the existing one.
As you’ve seen, the location object and the location.href property both contain URL information your application might find useful. Before you change the current URL that someone is viewing, ensure that the change doesn’t disrupt the person’s browsing activity. That might happen, for instance, if a site visitor is trying to fill out a form and a new web page suddenly appears.
Empower your team. Lead the industry.
Get a subscription to a library of online courses and digital learning tools for your organization with Udemy Business.