While creating a responsive website, there can be some instances where the developer needs to redirect the user to a different web page or site. This resultantly enhances the clarity on the user’s end. In such situations, navigating to a different URL in JavaScript assists in accessing the relevant content conveniently.
This blog will illustrate the approaches to get the browser navigate to the URL using JavaScript.
How to Get the Browser to Navigate to URL Using JavaScript?
To make the browser navigate to URL, apply the following approaches:
-
- “window.location.href” property.
- “replace()” method.
- “location.assign()” method.
Method 1: Get the Browser to Navigate to URL Using the “window.location.href” Property in JavaScript
The “window.location.href” property gives the current page’s URL. This property can be used to navigate the browser to the specified URL directly.
Example
Let’s overview the below lines of code:
<script>
function myFunction(){
window.location.href='https://linuxhint.com/';
}
</script>
In the above code block:
-
- Firstly, create a button along with an “onclick” event accessing the function myFunction().
- In the JavaScript code, define a function “myFunction()”.
- In the function definition, apply the “window.location.href” property to navigate to the specified URL upon the button trigger.
Output
In the above output, it can be seen that the particular URL is loaded upon button click.
Method 2: Make the Browser Navigate to URL Using the “replace()” Method in JavaScript
The “replace()” method replaces the current document with the newly specified one. This method can be applied to likewise switch to the specified URL by replacing the current one.
Syntax
In the above syntax, “URL” refers to the page’s URL where you want to navigate.
Example
Let’s go through the following example to understand the concept clearly:
<script>
function myFunction() {
window.location.replace("https://linuxhint.com/");
}
</script>
In the above code snippet:
-
- Likewise, create a button having an associated “onclick” event invoking the stated function.
- In the JavaScript code, likewise declare a function named “myFunction()”.
- In its definition, apply the “replace()” method to replace the current URL with the specified updated URL and switch to it upon the button click.
Output
Method 3: Make the Browser Navigate to URL Using the “location.assign()” Method in JavaScript
The “location.assign()” method loads an entire new document. This method can be implemented to assign a new URL and navigate to it upon user action.
Syntax
In the above-given syntax, “URL” corresponds to the URL to switch.
Example
Let’s follow the below-provided example:
<span onclick="myFunction()">Read more...</span>
</p>
<script>
function myFunction(){
window.location.assign("https://linuxhint.com/")
}
In the above code:
-
- Firstly, include a paragraph having the contained “<span>” element containing incomplete text and redirect to the specified function.
- In the JS code, similarly, declare a function “myFunction()”.
- Within the function, apply the “location.assign()” method to assign a new URL.
- This updated URL will be navigated upon the button click.
Output
That was all about getting the browser to navigate to the URL in JavaScript.
Conclusion
To get the browser to navigate the URL, apply the “window.location.href” property, the “replace()” method, or the “location.assign()” method. These approaches can be used to redirect to the specified, replaced, or newly assigned URL. This article stated the approaches to make the browser navigate to URL using JavaScript.
