Javatpoint Logo
Javatpoint Logo

Window Location in JavaScript

Window.location is used to provide a Location object with details about the document's current location. This Location object reflects the location (URL) of the object it's linked to, i.e., it holds information about the current content location (host, href, etc.)

JavaScript Location Object

The window.location attribute represents the URL of the page being displayed in that window.

Since the window is at the top of the scope chain, window.location properties can be accessed without the window prefix. Using the window object's location attribute, you may get the page's URL, hostname, protocol, etc.

Javascript window.location.href property

  • The href attribute on the location object contains the current webpage's URL.
  • By modifying the href property, a user can go to a new URL or page.
  • It adds an item to the history list (so that when the user clicks "Back," they can return to the current page).
  • Updating the href attribute is faster andeasier than using the assign() function.
  • The calling function is slower than accessing the property.

Syntax:

The following syntax shows javascript windows.href.location working procedure.

  • The "window.location.href " function is used to display the current URL path. We can see the path of the website and html file.

Examples

The following examples show the href value of the location of the window using the javascript method.

Example1

The following example shows the file path on the running browser. We can see the URL link of the location of the windows using the "innerHTML" function.

Output

The given output shows the current url link.

Window Location in JavaScript

Example2

The following example shows the file path on the running browser. It shows the current href link using the onclick function and buttons. We can see the URL link using the alert box.

Output

The given output shows the current href link using the javascript function.

Output1

Window Location in JavaScript

Output2

Window Location in JavaScript

JavaScript location properties

We can use windows location properties using the JavaScript function. We can get the path, filename, port number and other files and url related information. We can see multiple functions or methods to get location property as per user requirement.

  • Location.protocol

The Javascript location.protocolis used to show the protocol scheme of the given URL, including the final colon (:) symbol. The 'http:' and 'https:' are examples of the location protocol in javascript.

Syntax

The below syntax is utilized for the return protocol of the url.

  • The website name or file path name is the required protocol, and this syntax is used to display the protocol.

Example

The following example shows other properties of the JavaScript location protocol.

Output

The given output shows the url properties value.

Window Location in JavaScript
  • JavaScript location host and hostname property

The Javascript location.hostis displayed as the required or available host number. The Javascript location.hostname is used to get the required or available hostname.

The "localhost:8080" is an example of the location host of the URL. The "www.javatpoint.com " is an example of the local hostname.

Syntax

The below syntax is used to return the host value.

The below syntax is used to return the hostname.

  • The simple syntax is worked to show localhost of the file path or url.
  • The website name or file path name is displayed as a hostname.

Example

The following example is displayed the JavaScript location hostname.

Output

The given output shows the url properties value.

Window Location in JavaScript
  • JavaScript location port

The Javascript location.port shows the port number of the available URL. The 8080 or 8085 is an example of a windows location port.

Syntax

The below syntax is used to show the location port of the url.

Example

The following example is displayed the JavaScript location hostname.

Output

The given output shows the url properties value.

Window Location in JavaScript
  • Location.pathname

The Javascript location.pathnameincludes an initial'/'followed by the given path of the URL. The "/js/index.html" is an example of the location pathname.

Syntax

The below syntax and return values are displayed as the path value.

Example

The following example is displayed the JavaScript location pathname.

Output

The given output shows the url properties value.

Window Location in JavaScript
  • Location.hash

The Javascript location.hash gives a given string. It contains a '#' followed by the fragment identifier of the available URL.

Syntax

The given syntax is used to show the hash included in the url.

Example

The following example is displayed the JavaScript location pathname.

Output

The given output shows the url properties value.

Window Location in JavaScript
  • Location.origin

The Javascript location.origin is a string that includes the canonical form of the origin of the specific location.

The http://localhost:8080 is the demo example of the javascript location by default.

Example

The following example is displayed the JavaScript location's origin format.

Output

The given output shows the url properties value.

Window Location in JavaScript
  • Location.username

The Javascript location.username is a string that includes the username before the domain name.

The "url.username" is used to get the predefined URL value's username using javascript.

Example

The following example is displayed the JavaScript location username.

Output

The given output shows the url properties value.

Window Location in JavaScript
  • Location.password

The Javascript location.password is a string that shows the password specified before the domain name.

Example

The following example is displayed the JavaScript location password.

Output

The given output shows the url properties value.

Window Location in JavaScript
  • Location.search

The Javascript location.searchis a string which shows the query string of the given URL:

"?type=listing&answer=no"

Example

The following example is displayed the JavaScript location password.

Output

The given output shows the url properties value.

Window Location in JavaScript

Location properties Examples

The following example shows all properties of the JavaScript location. Here, we can see all the location properties of the file path using the javascript function.

Output

The given output shows the url properties value.

Window Location in JavaScript

Manipulate the Javascript location

The manipulation of location is used to get the required url or file path as per user requirement. Themanipulation of the locationis used three methods which are assign(),reload(), andreplace(). This method is worked with JavaScript functions and events.

  • JavaScript Assign() method

The assign() method is used to get a URL and navigate url path on the page. It is worked for adding url path to the browser's history stack.

Syntax

The following syntax uses to assign the required URL.

  • The "window.location.assign" function is used to get the required URL path.
  • We can place the path or url link of the file or website.

Example

The given an example assigns the given and the required URL. Here, we can use the button with the onclick function to display the assigned url.

Output

The given output images show the assigned url.

Output1

Window Location in JavaScript

Output1

Window Location in JavaScript
  • Javascript replace() method

The replace() pattern is related to assign(), except it doesn't create a new history stack entry. Therefore, you can't use the back button to go back. This function shows new or replaced URLs from old URLs.

Syntax

The following syntax uses to replace the required URL.

  • The "window.location.replace" function is used to get a new URL path.
  • We can replace the path or url link from old to new using the simple javascript method.

Example

The given example replaces the given required URL. Here, we can use a button with the onclick function to get a new url from an old url.

Output

The given output images show replaced url.

Output1

Window Location in JavaScript

Output1

Window Location in JavaScript
  • Javascript reload() method

The reload() method is utilized to reload a page. When you call reload() with no argument, the browser reloads the page in the most effective method, loading page resources from the cache if they haven't changed since its last request.

Syntax

The following syntax uses to reload the required URL.

  • the location.reload() function reload url and display a blank page.
  • It does not need any file path or current url

Example

The given an example reloads the given required URL. We can reload the page using the javascript onclick function.

Output

The given output shows reload url.

Window Location in JavaScript

Summary

The location object includes a page's URL. It can be accessed using window.location or document.location.

The Location object has characteristics that represent the URL, such as protocol, pathname,host, and search. To manipulate the location, set its properties and use assign(), replace(), and reload().


Next Topic#





Youtube For Videos Join Our Youtube Channel: Join Now

Feedback


Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA