Window Location

The window.location object provides information about the current URL or the URL of the current web page. It allows you to read and modify various properties related to the browser's location.

Here are some commonly used properties of the window.location object:

location.href

Returns the complete URL of the current page.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript location.href Property</h1>
<p id="demo"></p>

<script>
    let uRl = location.href;
    document.getElementById("demo").innerHTML = uRl;
</script>

</body>
</html>

Preview

location.protocol

Returns the protocol of the current URL, such as "http:" or "https:".

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript location.protocol Property</h1>
<p id="demo"></p>

<script>
    let protoCol = location.protocol;
    document.getElementById("demo").innerHTML = protoCol;
</script>

</body>
</html>

Preview

location.host

Returns the hostname and port number of the current URL.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript location.host Property</h1>
<p id="demo"></p>

<script>
    let host = location.host;
    document.getElementById("demo").innerHTML = host;
</script>

</body>
</html>

Preview

location.hostname

Returns the hostname (domain) of the current URL.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript location.hostname Property</h1>
<p id="demo"></p>

<script>
    let hostName = location.hostname;
    document.getElementById("demo").innerHTML = hostName;
</script>

</body>
</html>

Preview

location.port

Returns the port number of the current URL, if specified.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript location.port Property</h1>
<p id="demo"></p>

<script>
    let port = location.port;
    document.getElementById("demo").innerHTML = port;
</script>

</body>
</html>

Preview

location.pathname

Returns the path and filename of the current URL.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript location.pathname Property</h1>
<p id="demo"></p>

<script>
    let pathName = location.pathname;
    document.getElementById("demo").innerHTML = pathName;
</script>

</body>
</html>

Preview

location.search

Returns the query string part of the current URL.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript location.search Property</h1>
<a id="wt" href="https://webtutor.dev/js/js-syntax?123">https://webtutor.dev/js/js-syntax?123</a>
<p id="demo"></p>

<script>
    let anchor = document.getElementById("wt");
    let query = anchor.search;
    document.getElementById("demo").innerHTML = query;
</script>

</body>
</html>

Preview

location.hash

Returns the fragment identifier (anchor) part of the current URL.

By accessing these properties, you can obtain various details about the current URL, such as its protocol, hostname, path, query parameters, and fragment identifier. This information can be used to perform URL manipulations, retrieve specific parts of the URL, or navigate to different pages programmatically.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript location.hash Property</h1>
<a id="wt" href="https://webtutor.dev/js/js-syntax#123">https://webtutor.dev/js/js-syntax#123</a>
<p id="demo"></p>

<script>
    let url = document.getElementById("wt");
    document.getElementById("demo").innerHTML = url.hash;
</script>

</body>
</html>

Preview

assign()

The assign() method of window.location is used to load a new document. It navigates the browser to the specified URL.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript assign() Method</h1>
<button onclick="myFunction()">Click me</button>

<script>
    function myFunction() {
        location.assign("https://www.webtutor.dev");
    }
</script>

</body>
</html>

Preview

reload()

The reload() method of window.location is used to reload the current web page. It reloads the page with the same URL.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript reload() Method</h1>

<script>
    location.reload();
</script>

</body>
</html>

Preview

replace()

The replace() method of window.location is used to replace the current document with a new one. It navigates the browser to the specified URL, but it does not store the current page in the session history.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript replace() Method</h1>
<button onclick="myFunction()">Click me</button>

<script>
    function myFunction() {
        location.replace("https://www.webtutor.dev")
    }
</script>

</body>
</html>

Preview

location.origin

The origin property of window.location represents the protocol, hostname, and port number of the current URL. It provides the base URL of the current page.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript location.origin Property</h1>
<p id="demo"></p>

<script>
    let oriGin = location.origin;
    document.getElementById("demo").innerHTML = oriGin;
</script>

</body>
</html>

Preview

JS Screen

JS History

Window Location

location.href

Example

location.protocol

Example

location.host

Example

location.hostname

Example

location.port

Example

location.pathname

Example

location.search

Example

location.hash

Example

assign()

Example

reload()

Example

replace()

Example

location.origin

Example

Links

Tutorials

Connect with us