Why does my window.open() call get blocked by the browser?

Popup blockers only allow window.open() to work when it's called synchronously inside a direct user interaction, like a click handler. If you call it after an await, inside a .then() callback, or from a setTimeout, the browser can no longer connect it to the user's action and blocks it as an unwanted popup.

Should I use window.location.href or window.location.replace() for a redirect?

Use href when the redirect is a normal navigation the user should be able to undo with the back button (e.g. following a link). Use replace() when the redirect is the result of an action that shouldn't leave a re-visitable page in history, like a post-login redirect or cleaning up a URL after processing a one-time token.

Are JavaScript redirects as good for SEO as server-side redirects?

No — a server-side HTTP redirect (301/302) happens before any HTML is even sent, so crawlers follow it immediately and reliably. A JavaScript redirect via window.location only fires after the page loads and scripts execute, meaning crawlers might index the pre-redirect page's content, and users see a brief flash of the original page. Use a server-side redirect whenever possible for pages that need to be redirected permanently.

JS MASTER CLASS /// MASTER THE ENGINE /// BUILD LOGIC /// ASYNC PATTERNS /// JS MASTER CLASS /// MASTER THE ENGINE ///

Window Manipulation & JavaScript Redirects | Web Dev Tutorial - In-Depth Guide

Comprehensive JavaScript tutorial on Window Manipulation and Programmatic Redirects. Learn to open, close, and resize windows securely. Master location.href vs location.replace() for robust SEO-friendly navigation and browser history management.

⚡ Total XP: 0|💻 javascript XP: 0

Skill Matrix

UNLOCK NODES BY LEARNING NEW TAGS.

System Hub

Core logic.

Quick Quiz //

What is the primary advantage discussed here?

🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Exercises.

🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.

The window object exposes methods for controlling the browser window itself — opening and closing popups, moving and resizing them, and navigating the page programmatically. This lesson covers window.open(), window.close(), moveTo()/resizeTo(), and the two main ways to redirect a page with window.location: assigning .href and calling .replace().

1Window Manipulation & JavaScript Redirects | Web Dev Tutorial - In-Depth Guide Part 1

Welcome! Today we' You'll learn how to control the browser window itself, from opening new tabs to redirecting users.

—

// Window & Redirection Control

localhost:3000

Terminal
Code executed.

2Window Manipulation & JavaScript Redirects | Web Dev Tutorial - In-Depth Guide Part 2

The ' 'window.open()' method allows you to open a new browser window or tab. You can specify the URL and dimensions.

—

const myWindow = window.open('https://google.com', '_blank', 'width=500,height=500');

localhost:3000

Terminal
> google.com', '_blank', 'width=500,height=500');

3Window Manipulation & JavaScript Redirects | Web Dev Tutorial - In-Depth Guide Part 3

Once you have a reference to a window, you can close it programmatically using ' '.close()'.

—

myWindow.close(); // Closes the opened window

localhost:3000

Terminal
> Closes the opened window

4Window Manipulation & JavaScript Redirects | Web Dev Tutorial - In-Depth Guide Part 4

You can also move and resize windows using ' 'moveTo()' and 'resizeTo()'. Note: Browsers restrict these for security.

—

myWindow.moveTo(100, 100); // Moves to x=100, y=100
myWindow.resizeTo(800, 600);

localhost:3000

Terminal
> Moves to x=100, y=100

5Window Manipulation & JavaScript Redirects | Web Dev Tutorial - In-Depth Guide Part 5

Redirection is handled by ' 'window.location'. Assigning a value to '.href' triggers a navigation.

—

window.location.href = 'https://github.com';
// Or use replace to remove the current page from history
window.location.replace('https://github.com');

localhost:3000

Terminal
> github.com';
> github.com');

6Window Manipulation & JavaScript Redirects | Web Dev Tutorial - In-Depth Guide Part 6

Window manipulation and redirects mastered! You now have full control over the user

—

<h1>Control: Absolute</h1>

localhost:3000

Terminal
Code executed.

7Step-by-Step Breakdown

Welcome! Today we' You'll learn how to control the browser window itself, from opening new tabs to redirecting users.

The ' 'window.open()' method allows you to open a new browser window or tab. You can specify the URL and dimensions.

Once you have a reference to a window, you can close it programmatically using ' '.close()'.

Checkpoint: Which window method is used to close a window that was previously opened with JavaScript?

→exit()
→close()
→remove()

You can also move and resize windows using ' 'moveTo()' and 'resizeTo()'. Note: Browsers restrict these for security.

Redirection is handled by ' 'window.location'. Assigning a value to '.href' triggers a navigation.

Checkpoint: What is the difference between window.location.href and window.location.replace()?

→They are exactly the same
→replace() removes the current page from the session history

Window manipulation and redirects mastered! You now have full control over the user

Level Up 🚀

Advanced cheat sheets, SEO tricks, and interview prep for this topic.

Browser Support

ChromeSupported

Fully supported.

FirefoxSupported

Fully supported.

SafariSupported

Fully supported.

EdgeSupported

Fully supported.

Accessibility (A11y)

1Warn Users Before Opening Unexpected New Windows

A link or button that silently triggers window.open() can disorient screen reader and keyboard users who don't expect a new browsing context to appear; indicate in the accessible name (e.g. 'Opens in a new window') and manage focus so it lands somewhere sensible in the new window rather than leaving the user lost.

SEO Implications

1
Client-Side JavaScript Redirects Are Slower and Less SEO-Friendly Than Server-Side Redirects
Setting window.location.href in JavaScript only happens after the page has loaded and executed scripts, meaning crawlers may briefly index the original page before the redirect fires, and real users experience a visible flash of the wrong page. A server-side 301/302 redirect (via HTTP headers) is faster and more reliably followed by search engines.

Best Practices

Use location.replace() for Post-Action Redirects Like Login or Form Submission

If a redirect happens automatically after a successful action (like logging in), use replace() so the previous page isn't kept in history — otherwise clicking 'back' would resubmit the user into a stale pre-login page or, worse, resubmit a form.

Never Rely on window.moveTo()/resizeTo() Working, Because Browsers Restrict Them by Default

Most modern browsers silently ignore moveTo()/resizeTo() calls on windows the current script didn't open, and some restrict them even on script-opened windows. Don't build critical UI logic around these methods succeeding — treat window sizing as advisory at best.

Frequent Bugs

THE BUG

window.open() is blocked by the browser's popup blocker even though the code looks correct.

THE FIX

Popup blockers only allow window.open() to succeed when it's called synchronously in direct response to a user gesture (like a click handler). Calling it inside an async callback, a setTimeout, or after an awaited fetch usually gets silently blocked — trigger it directly inside the synchronous click handler instead.

THE BUG

Using window.location.href for a post-login redirect lets users hit 'back' and land on a broken authenticated-only page.

THE FIX

href-based redirects add a new history entry, so the browser's back button returns to the pre-redirect page, which may now be invalid. Use window.location.replace() instead, which swaps the current history entry rather than adding a new one.

Real-World Examples

Redirecting After a Successful Login Without Polluting History

An app needed to send a user to their dashboard immediately after a successful login API call, without leaving the login page in browser history (so clicking back wouldn't return them to a stale login form).

async function handleLogin(credentials) {
  const res = await fetch('/api/login', { method: 'POST', body: JSON.stringify(credentials) });
  if (res.ok) {
    window.location.replace('/dashboard');
  }
}

Interview Prep

?Frequently Asked Questions

Pascual Vila

Frontend Instructor // Code Syllabus

Common Pitfalls & Errors

The Error //

Mutating arrays while iterating over them

// Wrong
items.forEach((item, index) => {
  if (item === 'remove') items.splice(index, 1);
});

// Correct
const newItems = items.filter(item => item !== 'remove');

The Solution //

Modifying an array's length or contents while looping through it (with a for loop or forEach) can cause elements to be skipped. Use methods like filter() or map() instead.

The Error //

Forgetting to await asynchronous functions

// Wrong
const data = fetch('api/data');
console.log(data.json()); // Error

// Correct
const response = await fetch('api/data');
const data = await response.json();

The Solution //

If a function returns a Promise, you must use 'await' (or .then) to get its resolved value. Otherwise, your variable will hold a Promise object instead of the data.