How To Pass Data From One Page To Another In Html Using Javascript

In this article, I will explain how to redirect to another page in JS. I’ll also give some simple examples of a JavaScript redirect.

You can redirect the user from one web page to any other in several ways. Including by updating the HTML metadata, server-side redirects. For example, using a .htaccess file, PHP, and using client-side redirects via JavaScript.

But keep in mind that unexpected redirects that occur in the middle of another action annoy visitors. Therefore, you should only use redirects if they are really necessary and if it makes sense from the user’s point of view.

Let’s look at how you can use JavaScript to redirect the user to another page.

Automatic JavaScript redirect to another page

If you want to automatically redirect a user from one page (URL1) to another page (URL2), you can use the following code:

window.location.href = 'URL2';

Insert the above code on the first page (URL1). Replace URL2 with the desired page address. It’s best to put this code inside the element (rather than at the bottom of the page) so that the page is redirected before the browser starts displaying it.

TIP: If you’re using inline JavaScript (i.e. without an external .js file), remember to put the JavaScript code inside the tags.

Redirect to another page after X seconds

In this example, we will perform a js redirect to another page sometime after the page loads. For example, if we want to redirect a visitor to the homepage after the welcome page has been displayed for 5 seconds:

setTimeout(function(){
  window.location.href = 'homepage-url';
}, 5 * 1000);

You need to insert the above JavaScript code on the welcome page. Remember to replace the homepage-url with the URL of the homepage.

We used the setTimeout method to tell the script to redirect after 5 seconds (multiply 5 by 1000 to convert seconds into milliseconds).

TIP: In JavaScript, time values are always calculated in milliseconds.

Redirect to another page based on a condition

For example, you can perform redirects based on the visitor’s browser (although this is not recommended), screen size, time of day, or other conditions.

Use the following code to redirect visitors who meet a certain condition:

if (CONDITION) {
  window.location.href = 'redirect-url';
}

For example, this code redirects visitors to another page if their screen width is less than 600 pixels:

if (screen.width < 600) {
  window.location.href = 'redirect-url';
}

Redirect to another page based on user actions

The last example demonstrates how to redirect a visitor based on their actions. You can bind a js redirect to any type of user action. In this example, for simplicity, we’ll handle the click of a button.

The following code will redirect the visitor to the landing page after clicking on #mybutton:

document.getElementById('mybutton').onclick = function() {
  window.location.href = 'redirect-url';
};

You can do the same using the following code:

<button onclick="window.location.href = '/'">Go to Homepage</button>

You can also associate a redirect with any event or user action. Just don’t forget to make sure that your redirects won’t cause frustration to users.

I tried to look at all possible cases of js redirecting to another page. If I ever come across any other scenarios, I’ll add them to this article.

Let me know what you think about this material topic in the comments. For comments, dislikes, likes, feedback, subscriptions, thank you so much!