The window object is a global object that has the properties pertaining to the current DOM document, which is the things that are in the tab of a browser.
The document property of the window object has the DOM document and associated nodes and methods that we can use to manipulate the DOM nodes and listen to events for each node.
In this article, we will look at the location.assign , location.reload, location.replace, and location.toString methods. Also, we will look at the document.readyState, document.referrer , and the document.title properties.
Methods of the window.document.location Object
location.assign
The location.assign method causes the window to load and display the document with the given URL. If location.assign fails to run because of a security violation, then the DOMException of the type SECURITY_ERROR will be thrown.
This happens if the script that calls this method has a different origin than the currently loaded page. The most probable cause of this is that the script is hosted on a different domain.
This is needed to prevent unauthorized scripts from taking users to URLs that they didn’t ask for, exposing them to malicious sites. It takes one argument, which is the string with the URL that we want to load. For example, if we want to go to https://medium.com then we can write:
document.location.assign('https://medium.com');
location.reload
To reload the current page, we can use the location.reload method. It works exactly like when you press the Refresh button on your browser. In some browsers, this method takes an option boolean argument, which is false by default. If it’s true , then the page is always reloaded from server, bypassing the browser’s HTTP cache. The call for this method may be blocked and a SECURITY_ERROR type of the DOMException will be thrown if the origin that calls the reload method is different from the origin of the URL of the current loaded page. This is needed to prevent unauthorized scripts from taking users to URLs that they didn’t ask for, exposing them to malicious sites. We can call the reload method like in the following code:
location.reload(true);
location.replace
The location.replace method loads the new URL that’s passed into this function. If we use the replace method, then the page that we were in before the replace method is called won’t be saved in the session History unlike the assign method. This means that the user won’t be able to click the back button to go back to the page that was loaded this method was called. The call for this method may be blocked and a SECURITY_ERROR type of the DOMException will be thrown if the origin that calls the reload method is different from the origin of the URL of the currently loaded page. This is needed to prevent unauthorized scripts from taking users to URLs that they didn’t ask for, exposing them to malicious sites. It takes one argument, which is a string for the URL to load. If the URL isn’t valid, then a SYNTAX_ERROR type of the DOMException will be thrown. For example, if we want to go to https://medium.com then we can write:
document.location.replace('https://medium.com');
location.toString
The toString method returns a string of the whole URL. It’s a read only version of the href property. For example, we can call it like in the following code:
console.log(document.location.toString());
Then we get something the whole URL which is something like https://fiddle.jshell.net/_display/ .
window.document.readyState
To get the loading state of the document object we can use the readyState property. It is a read only string property that get can be set to one of the 3 values:
'loading'— the document is loading'interactive'— the document is loaded and the document is parsed but sub-resources such as images, stylesheets, and frames are still loading.'complete'— this document and sub-resources such as images, stylesheets, and frames are all loaded. This state indicates that theloadevent is about to be triggered.
We can watch the state of the readyState property with a handler for the readystatechange event. One way to write it is to assign an event handler function to the onreadystatechange property. For example, we can write:
document.onreadystatechange = function() {
console.log(document.readyState);
}
We can also use the addEventListener method to attach the readystatechange event listener, like in the following code:
document.addEventListener('readystatechange', event => {
console.log(event.target.readyState);
})
window.document.referrer
The referrer property is a read-only string property that returns the URI of the page that’s linked to the currently loaded page. An empty string is returned if the user has navigated to the page directly. That is, the user didn’t navigate to the page through a link, but rather by doing something like typing in the URL directly or clicking on a bookmark. Inside an iframe , the document.referrer will initially be set to the same value as the href of the parent window’s window.location . For example, if we log the document.referrer like in the following code:
console.log(document.referrer)
We may get a URL like https://jsfiddle.net/.
window.document.title
We can use the title property of the document object to get the title of a web page. It’s a property that can get or set. When we use it as a getter, we get a string with the title of the web page. The value set by assigning a string to the document.title takes precedence over the title in the title tag of the HTML markup, so the title that’s set programmatically will be returned if it’s set, otherwise, the one in the HTML markup will be returned. For example, if we set the title with JavaScript by writing the following:
document.title = 'New Title';
Then we get ‘New Title’ on the top of the browser tab. Then when we log the title with console.log(document.title); we also get ‘New Title’. If we didn’t set the title with document.title , then we title in the HTML markup. In Gecko-based browsers, this property applies to HTML, SVG, XUL and other documents.
For XUL, the title attribute of the <xul:window> or other top-level XUL element will have the value of document.title set. In XUL, accessing the document.title before the document if fully loaded has undefined behavior. It may return an empty string and setting document.title may have no effect.
Conclusion
In this article, we looked at various method properties of the location object. The location.assign let us go to another page with a different URL while keeping the currently loaded page in history.
The location.reload method will reload the page, with some browsers accepting a boolean argument that will bypass the cache when reloading the true is passed in.
Like location.assign, the location.replace method let us go to another page with a different URL but the currently loaded page won’t be kept in the history. The location.toString method gets the full URL in string form.
We also looked at some other properties of the document object. The document.readyState let us know the state of the page that’s being loaded.
The document.referrer property is handy for getting the URL of the page that triggered the loading of the currently loaded page, and the document.title property let us get and set the title to the currently loaded web page.
