How To Redirect Another Page Using Javascript

Websolutionstuff | Nov-04-2022 | Categories : PHP jQuery

In this article, we will see how to redirect another page using javascript. we will redirect the page to another page in different ways. There are many methods to redirect to another page using javascript. Also, you can redirect to another page on click, and also you can redirect another page after successful login.

So, let's see a redirect to another page in jquery and how to redirect a page in javascript.

There is the most popular redirection method is location.href and location.replace.

Syntax:

location.href = "URL"
      or
location.replace("URL")

 

Example:

// Same as clicking on a link
window.location.href = "https://websolutionstuff.com/";

// Same as an HTTP redirect
window.location.replace("https://websolutionstuff.com/");

 

  • If you want to simulate someone clicking on a link, use location.href
  • If you want to simulate an HTTP redirect, use location.replace

 

Example of location.href:

The location.href is property that sets or returns the entire URL of the current page.

<!DOCTYPE html>
<html>
<body>

<p>Click the button to set the href value to https://websolutionstuff.com/quick-links</p>

<button onclick="myHrefExample()">Websolutionstuff - Quick Links</button>

<script>
function myHrefExample() {
  location.href = "https://websolutionstuff.com/quick-links";
}
</script>

</body>
</html>

 

 

Example of location.replace:

The location.replace method replaces the current document with a new one.

<!DOCTYPE html>
<html>
<body>

<button onclick="myReplaceExample()">Click Here</button>

<script>
function myReplaceExample() {
  location.replace("https://websolutionstuff.com/")
}
</script>

</body>
</html> 

 

Example location.assign:

The location.assign method to load a new document.

Note: 

The difference between assign() and replace()

replace() removes the current URL from the document history.

With replace() it is not possible to use "back" to navigate back to the original document.

<!DOCTYPE html>
<html>
<body>

<button onclick="myAssignExample()">Assign Redirect Example</button>

<script>
function myAssignExample() {
  location.assign("https://websolutionstuff.com/");
}
</script>

</body>
</html>

 

 

Example:

In this example, we will set the URL in the location property using the prop() method in jquery.

<!DOCTYPE html>
<html>
<body>

<p>Click the button to redirect another page</p>

<button onclick="redirectFunction()">Redirect</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
function redirectFunction() {  	
  	var url = 'https://websolutionstuff.com/';
	$(location).prop('href', url);
}
</script>

</body>
</html>

 

Example:

There are many ways to redirect to another page in javascript or jquery.

// window.location
window.location.replace('https://websolutionstuff.com/')
window.location.assign('https://websolutionstuff.com/')
window.location.href = 'https://websolutionstuff.com/'
document.location.href = 'https://websolutionstuff.com/'

// window.history
window.history.back()
window.history.go(-1)

// window.navigate; ONLY for old versions of Internet Explorer
window.navigate('top.jsp')


// Probably no bueno
self.location = 'https://websolutionstuff.com/';
top.location = 'https://websolutionstuff.com/';

// jQuery
$(location).attr('href','https://websolutionstuff.com/')
$(window).attr('location','https://websolutionstuff.com/')
$(location).prop('href', 'https://websolutionstuff.com/')

 


You might also like:

Recommended Post
Featured Post
How To Create Zip File Using Ziparchive in Laravel
How To Create Zip File Using Z...

In this article, we will see how to create a zip file using zipArchive in laravel. Sometimes we have requirements to hav...

Read More

Sep-16-2020

How To Count Working Days In Laravel 9
How To Count Working Days In L...

In this article, we will see how to count working days in laravel 9. Here, we will learn to calculate working days...

Read More

Jan-23-2023

Laravel 11 Livewire 3 Flash Messages
Laravel 11 Livewire 3 Flash Me...

In this guide, I will show you how to display flash messages in Laravel 11 using Livewire 3. Flash messages are temporar...

Read More

Feb-27-2025

Building a Multi-Tenant SaaS App in Laravel 11
Building a Multi-Tenant SaaS A...

Hello, laravel developers! In this article, I will walk you through how to build a multi-tenant SaaS application in...

Read More

Oct-14-2024