JavaScript Window focus() Method

What You’ll Learn

The window.focus() method brings a browser window or tab to the front. This tutorial covers syntax, how it differs from element.focus(), focusing popups opened with open(), five examples, and browser restrictions beginners must know.

Introduction

When your app opens a helper window—a print preview, OAuth popup, or small tool panel—you usually want that window visible immediately. The window.focus() method asks the browser to bring a window or tab to the foreground so the user can interact with it.

Beginners often search for “focus” when they mean putting the cursor in a text field. That is HTMLElement.focus(), not window.focus(). This page covers the window method—the API on the global browser window object and popup references returned from window.open().

Understanding the focus() Method

window.focus() takes no arguments and returns undefined. Called on the global window, it targets the current browsing context. Called on a reference from window.open(), it targets that popup: popupWindow.focus().

Browsers limit scripts from grabbing focus aggressively—especially from background tabs or without a user click. The most reliable pattern is: open a popup in response to a button click, then call popup.focus() right away.

📝 Syntax

General form of Window.focus():

window.focus();
// focus a popup reference:
popupWindow.focus();

Parameters

• None.

Return value

• undefined.

Related APIs

• window.open() — create a popup you may focus afterward.
• window.blur() — opposite: request unfocus from the window.
• element.focus() — move keyboard focus to an HTML element.
• window.addEventListener("focus", fn) — run code when the tab becomes active.
• document.hasFocus() — check whether the document currently has focus.

Examples Gallery

Use the Try-it links to open small popups and call focus(). Popups opened by your script during a user click are the most reliable way to see the method in action.

document.getElementById("focusBtn").addEventListener("click", function () {
  window.focus();
  console.log("window.focus() called");
});

window.focus() called

document.getElementById("openBtn").onclick = function () {
  const popup = window.open("", "FocusDemo", "width=320,height=160");

  if (popup) {
    popup.document.write("<p>Popup opened</p>");
    popup.focus();
    console.log("Popup opened and focus() called.");
  } else {
    console.error("Popup blocked by the browser.");
  }
};

Popup opened and focus() called.

let popupWindow = null;

document.getElementById("openBtn").onclick = function () {
  popupWindow = window.open("", "RefocusDemo", "width=300,height=140");
  popupWindow.document.write("<p>I am the popup</p>");
};

document.getElementById("focusPopupBtn").onclick = function () {
  if (popupWindow && !popupWindow.closed) {
    popupWindow.focus();
    console.log("Popup brought to front.");
  } else {
    console.log("Open the popup first.");
  }
};

Popup brought to front.

const popup = window.open("", "DelayedFocus", "width=300,height=140");

if (popup) {
  popup.document.write("<p>Focusing in 2 seconds…</p>");

  setTimeout(function () {
    popup.focus();
    console.log("popup.focus() called after delay");
  }, 2000);
}

popup.focus() called after delay

<input id="name" type="text" placeholder="Your name">
<button type="button" id="focusInput">Focus input</button>
<button type="button" id="focusWindow">Focus window</button>

<script>
  document.getElementById("focusInput").onclick = function () {
    document.getElementById("name").focus();
    console.log("Input focused — caret in the text field");
  };

  document.getElementById("focusWindow").onclick = function () {
    window.focus();
    console.log("window.focus() called — tab/window level");
  };
</script>

Input focused — caret in the text field
window.focus() called — tab/window level

🚀 Common Use Cases

• Popup helpers — focus a window opened with window.open() so users notice it.
• OAuth / login popups — bring the auth window forward after opening.
• Multi-window tools — refocus a helper panel the user minimized behind the main app.
• External links in new windows — optional popup.focus() after opening (respect user choice if blocked).
• Tab visibility — listen for the focus event to resume timers or refresh data when the user returns.
• Learning demos — compare window focus with element focus APIs side by side.

📝 Notes

• Pop-up blockers may return null from open()—there is nothing to focus until a popup exists.
• Refocusing a background tab from script without user interaction is often ignored.
• element.focus() for form fields is unrelated to window.focus() despite the shared name.
• document.hasFocus() tells you if the document currently holds focus.
• Page Visibility API (document.visibilityState) complements focus events for tab detection.
• Mobile browsers may open popups as new tabs with different focus behavior than desktop windows.

💡 Best Practices