How to Javascript forward url

by | Blog

Ever wondered how to redirect someone to another webpage using JavaScript? Maybe you’re building a fun website or creating a login flow. Whatever the case, learning how to forward a URL with JavaScript is super handy—and, lucky for us, it’s also super simple!

TL;DR (Too Long; Didn’t Read)

Redirecting a user to a different URL with JavaScript is quick and easy. You can use window.location.href, window.location.assign(), or window.location.replace(). Each method works a bit differently, like going back in browser history or not. We’ll break it down so you know exactly what to use and when.

Why would you want to forward a URL?

There are tons of reasons! Maybe your page has moved. Maybe a user just logged in and needs to go to their dashboard. Or maybe you just want to create a fun surprise redirect. Whatever your reason, JavaScript gives you the tools.

Let’s dive into the three most popular ways to forward a user with JavaScript.

1. window.location.href

Think of this one like typing a new URL into your browser and hitting “Enter.” It tells the browser, “Hey! Let’s go to this new place.”

window.location.href = "https://example.com";

What it does: Takes the user to https://example.com.

Can the user hit the back button to return? Yes!

This method is perfect if you just want a simple redirect and you’re cool with the user using the Back button later.

2. window.location.assign()

This one is very similar to window.location.href. In fact, under the hood, they do about the same thing.

window.location.assign("https://example.com");

What it does: Also redirects the user to a new webpage.

Can the user go back? Yes, just like with href.

Then why even bother with assign()? Good question! It can sometimes give you a tiny bit more control in more complex apps. But for basic URL forwarding, it’s interchangeable with href.

3. window.location.replace()

This one’s sneaky! Instead of adding a new page to your browser history, it replaces the current page.

window.location.replace("https://example.com");

What it does: Redirects the user, but they can’t hit the Back button to return.

Why use this?

  • You don’t want users to go back to the login page after they’ve logged in.
  • You’re cleaning up your URL structure behind the scenes.

It’s great for redirects that should be invisible to the user in their history.

When to use which one?

Here’s a quick cheat sheet:

  • Use window.location.href when you want a basic redirect and want the user to go back if needed.
  • Use window.location.assign() if you want a little more flexibility (but still add to browser history).
  • Use window.location.replace() when you don’t want users to go back to the previous page.

Can I make it happen automatically?

Yes! You can run the code as soon as your script loads or wait a few seconds. Here’s how to add a smooth delay:


setTimeout(function() {
  window.location.href = "https://example.com";
}, 3000); // Wait 3 seconds

This tells the browser, “Hey, chill for 3 seconds, then take off to the new URL.” Great for showing a message like “Redirecting you now…”

Want a clickable button redirect?

You can also add a button that triggers the redirect. It’s clean and simple!


<button onclick="window.location.href='https://example.com'">
  Go to Example
</button>

Clicking this bad boy takes the user to a new page. Nice!

Redirect inside an if condition

Let’s say you’ve got a logged-in user. You might check for that first:


if (userIsLoggedIn) {
  window.location.href = "/dashboard";
}

Only logged-in users? Redirect, baby!

What if I need to change the page relative to my current one?

No worries. You can use relative paths!

window.location.href = "../other-page.html";

This will go “one folder up” and then to other-page.html. Good for navigating inside a website structure.

Bonus: Using anchors

Wanna jump to a specific part of the page? Use this trick:

window.location.href = "#contact-section";

This scrolls the user directly to the element with id="contact-section". Works great on single-page apps.

Quick Test: Are you redirect-ready?

Try pasting one of these into your browser console while on any site:

window.location.href = "https://google.com";

You should be zoomed away to Google. If that works, congrats—you’ve officially learned JavaScript redirection!

Final Thoughts

Redirecting with JavaScript isn’t rocket science—and now you know the three biggest tools for the job:

  • href – Easy and reversible.
  • assign – Same as href, but may offer more flexibility in some apps.
  • replace – Moves forward without leaving a trail.

Whether you’re building a login workflow, changing page structures, or just having a bit of fun—URL forwarding is your friend.

Now go forth and redirect like a pro!

Pin It on Pinterest