John Au-YeungSubscribe to my email list now at http://jauyeung.net/subscribe/
Follow me on Twitter at https://twitter.com/AuMayeung
Many more articles at https://medium.com/@hohanga
Even more articles at http://thewebdev.info/
The window object is a global object that has the properties pertaining to the current DOM document, which are the things that are in the tab of a browser.
In this article, we will look at the properties of the window.document object, including the properties of the window.document.location object.
window.document.location
The document.location is a read-only property returns a Location object, which is information about the URL of the current document and gives us methods for changing and loading URLs.
Even though it’s a read-only Location object, if we assign a string to it, it will load the URL in the string.
For example, if we want to load 'https://medium.com' , we can assign it straight to the document.location property as in the following code:
document.location = 'https://medium.com';
This is the same as assigning the same URL to the document.location.href property:
document.location.href = 'https://medium.com';
Both pieces of code will load https://medium.com. The Location object has the following properties:
-
Location.href -
Location.protocol -
Location.host -
Location.hostname -
Location.port -
Location.pathname -
Location.search -
Location.hash -
Location.username -
Location.password -
Location.origin
Location.href
The location.href property is a string that has the whole URL. We can both use it to get the URL of the current page and set the URL so that we can go to the next page. For example, if we have:
console.log(location.href);
Then we get the full URL, which is something like:
https://fiddle.jshell.net/_display/
We can also use it to go to a different page. For example, we can write:
document.location.href = 'https://medium.com';
To go to the Medium website. It does the same thing as:
document.location = 'https://medium.com';
If the current document isn’t in a browsing context, then the value of this property is null.
Location.protocol
We can use the protocol property to get the protocol portion of the URL, which is the very first part of the URL before the first colon (:). For example, we can use it like in the following code:
console.log(document.location.protocol);
Then we get https: for an HTTPS web page and http: for HTTP pages. We can also set the protocol like in the following code:
document.location.protocol = 'http';
If the code above is run, the browser will attempt to go to the HTTP version of the current page.
Location.host
The host property has the string of the hostname. If there’s a port with the hostname, that will also be included. For example, we can retrieve hostname like in the following:
console.log(document.location.host);
Then we get something like fiddle.jshell.net from the console.log statement. We can also set the host property. If we write something like the following code:
document.location.host = 'medium.com';
Then the browser will switch the hostname for the current page with the new one and attempt to load the URL with the new hostname.
Location.hostname
The hostname property is a string property that contains the domain of the URL. For example, we can get the domain by running:
console.log(document.location.hostname);
Then we get something like fiddle.jshell.net from the console.log statement. We can also set the host property. If we write something like the following code:
document.location.hostname = 'medium.com';
Then the browser will switch the domain for the current page with the new one and attempt to load the URL with the new hostname.
Location.port
The port property lets us get and set the port of the URL. It is a string property. If the URL doesn’t have a port number then it’ll be set to an empty string. For example, if we have:
console.log(document.location.port);
Then we get something like “3000” if the port is 3000. We can also set the host property. If we write something like the following code:
document.location.port = '3001';
Then the browser will switch the port for the current page with the new one and attempt to load the URL with the new port number.
Location.pathname
The pathname property is a string property that has the slash followed by the path of the URL, which is everything after the domain. The value will be an empty string if there’s no path. For example, if we have:
console.log(document.location.pathname);
Then we get something like “/_display/”. We can also set the pathname property. If we write something like the following code:
document.location.pathname = '3001';
Then the browser will switch the path for the current page with the new one and attempt to load the URL with the new path.
Location.search
The search property is a string property that gets us the query string. The query string is the part of the URL after the ?. For example, we can get the query string part of the URL of the currently loaded page by running:
console.log(document.location.search);
Then we get something like:
"?key=value"
If we have a URL like http://localhost:3000/?key=value. To parse and manipulate the query string we can convert it to a URLSearchParams object. If we want to go to a URL with a different query string, we can assign a new query string to the document.location.search property like we do in the following code:
document.location.search = '?newKey=newValue';
Then the new URL for our browser tab will be http://localhost:3000/?newKey=newValue.
Location.hash
The hash property lets us get and set the part of the URL after the pound sign (#). The hash isn’t percent decoded. If there’s no hash fragment, then the value will be an empty string. For example, we can get the query string part of the URL of the currently loaded page by running:
console.log(document.location.hash);
Then we get something like:
"#hash"
if we have a URL like http://localhost:3000/?key=value. If we want to go to a URL with a different query string, we can assign a new query string to the document.location.hash property like we do in the following code:
document.location.hash= '#newHash';
Then the new URL for our browser tab will be http://localhost:3000/?newKey=newValue.
Location.username
The username property gets us the username portion of the URL returned as a string, which is the part between the protocol and the colon. For example, if we went to http://username:password@localhost:3000/, then document.location.username will get us 'username'. If we assign to it like wit the following code:
document.location.username = 'newUsername'
Then the new page will be http://newUsername:password@localhost:3000/..
Location.password
The password property gets us the username portion of the URL returned as a string, which is the part between the protocol and the colon. For example, if we went to http://username:password@localhost:3000/, then document.location.passwordwill get us 'password'. If we assign to it like wit the following code:
document.location.password= 'newPassword'
Then the new page will be http://username:newPassword@localhost:3000/.
Location.origin
The origin property is a string read-only property that has the origin of the represented URL.
For URLs that are with http or https , then it’ll include the protocol followed by :// , followed by the domain, followed by a colon, then followed by the port if it’s explicitly specified.
For a URL that has the file: scheme, then the value is browser dependent. For blob URLs, then the origin of the URL will be the part following blob: . For example, we can log the origin property like in the following code:
console.log(document.location.origin);
to get something like:
https://fiddle.jshell.net
The window.document.location object is an object that has the URL of the current page.
The location object let us various parts of the URL of the current page, and also set them so that the browser will switch out the part that’s designated by the property name and then go to the page with the new URL.
There are also methods to do various things to the currently loaded page, so stay tuned for the next part of this series.
