window.location

location is an object stored in window that allows you to get information about the current page address and change it using functions or by updating the fields of the object.

With location, we can get the current address:

        
          
          // if you run this script on the current webguide page in the consoleconsole.log(window.location.href)// 'https://doka.guide/js/window-location/'
          // if you run this script on the current webguide page in the console
console.log(window.location.href)
// 'https://doka.guide/js/window-location/'

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

You can reload the current page using reload(). This method does the same thing as the "Refresh" button in the browser:

        
          
          window.location.reload()
          window.location.reload()

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Using replace(), you can perform a client-side redirect, which will lead to an immediate transition to the address specified when calling the method:

        
          
          window.location.replace('https://doka.guide/')
          window.location.replace('https://doka.guide/')

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

To navigate through the site, we use addresses and page parameters. window.location contains a set of properties and methods to conveniently retrieve and manage the address.

href – a complete representation of the address. It can be said that this is a mirror of what is currently in the browser's address bar. If you assign a value to this property, the address will be updated, and a redirect to the new address will occur.

The other properties are pieces of location.href. They are needed to conveniently access each one separately rather than extracting them from the full address string manually.

        
          
          console.log(window.location.href)// will display the current addresswindow.location.href = 'https://example.com'// will navigate to the specified address
          console.log(window.location.href)
// will display the current address
window.location.href = 'https://example.com'
// will navigate to the specified address

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

protocol contains the current protocol through which the page is opened. Most often, it will be https and http.

host contains the host value from the link. The host includes the name of the current domain and port.

hostname — the domain portion from the host property, excluding the port.

port — the second component of the host value, containing only the port number. If the port is not explicitly specified, the property value will be an empty string ''.

origin includes the path starting from protocol and ending with port.

search, including the ? character, contains parameters in the format key=value, separated by &. If there are no parameters, the value will be an empty string.

hash, including the # character — anchor link. It is located at the very end of the path and is responsible for navigation between marked elements on the page using the attribute id on tags. This part of the URL is not sent to the server. If there are no parameters, the value will be an empty string.

        
          
          window.location.hash = 'in-progress'// will scroll the page to the element with `id="in-progress"` if such an element is present on the pageconsole.log(window.location.hash)// will print the anchor
          window.location.hash = 'in-progress'
// will scroll the page to the element with `id="in-progress"` if such an element is present on the page
console.log(window.location.hash)
// will print the anchor

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

pathname – a representation of the current path on the site. If the current URL does not contain a path, the value will be the root path "/".

For example, the values of window.location.pathname depending on the address:

• https://doka.guide/js/window-location/ → /js/window-location/.
• https://doka.guide → /.

assign(new_path) – the method initiates a transition to the page passed in the arguments. After transitioning to the page, the user can return to the previous page using the browser's "Back" button.

replace(new_path) is similar to the assign() method, but the address of the page from which this method was called will not be saved in the browser's history. When attempting to go back, the user will be sent to the page preceding the one to which the transition occurred.

reload() reloads the current page.

toString() converts the page address to a string. It returns the same value as location.href.