Window.focus() — Methode · JavaScript-Referenz

Signatur

Window.prototype.focus()

Beschreibung

window.focus() bittet den Browser, ein Fenster in den Vordergrund zu holen und ihm den Tastaturfokus zu geben. Meistens wird die Methode auf ein Fenster angewendet, das zuvor mit window.open() geöffnet wurde. Das ist nützlich, wenn ein bereits offenes Popup, etwa ein Hilfe- oder Login-Fenster, von einem anderen Fenster verdeckt ist und wieder sichtbar werden soll.

Die Methode ist nur eine Bitte an den Browser, keine Garantie. Moderne Browser verhindern, dass Webseiten sich unerwünscht in den Vordergrund drängen. Ob der Aufruf wirkt, hängt vom Browser, von den Einstellungen und davon ab, ob eine Benutzeraktion wie ein Klick vorausging. Einen Fehler gibt es nicht, und der Rückgabewert ist immer undefined. Ob das Fenster den Fokus bekommen hat, lässt sich höchstens danach mit document.hasFocus() oder dem focus-Event prüfen.

Innerhalb einer Seite lässt sich über iframe.contentWindow.focus() auch ein eingebetteter Frame fokussieren. Für einzelne Elemente wie Eingabefelder nimmt man stattdessen HTMLElement.prototype.focus().

Beispiele

Bereits geöffnetes Popup wieder nach vorn holen

let helpWindow = null;

const openHelp = () => {
  if (helpWindow && !helpWindow.closed) {
    // Fenster existiert schon – nur nach vorn holen
    helpWindow.focus();
  } else {
    helpWindow = window.open('/hilfe.html', 'hilfe', 'width=500,height=600');
  }
};

document.querySelector('#help-button').addEventListener('click', openHelp);

Prüfen, ob der Fokuswechsel geklappt hat

const popup = window.open('/vorschau.html', 'vorschau', 'width=800,height=600');

document.querySelector('#show-preview').addEventListener('click', () => {
  popup.focus();
  // Kurz warten, bis der Browser den Fokuswechsel verarbeitet hat
  setTimeout(() => {
    console.log('Hauptfenster hat noch den Fokus:', document.hasFocus());
  }, 100);
});

Hauptfenster hat noch den Fokus: false

Iframe fokussieren und auf das focus-Event reagieren

const frame = document.querySelector('#editor-frame');

frame.addEventListener('load', () => {
  // Funktioniert ohne Einschränkung nur bei Frames vom selben Ursprung
  frame.contentWindow.addEventListener('focus', () => {
    console.log('Editor-Frame hat den Fokus');
  });
  frame.contentWindow.focus();
});

Editor-Frame hat den Fokus

// Wichtig · Fallstricke

Keine Garantie: Chrome, Firefox und Safari ignorieren focus() oft, wenn keine Benutzeraktion vorausging. In Firefox kann der Nutzer das Verhalten über dom.disable_window_flip abschalten.
Hauptfenster: Ein normales Browser-Tab kann sich selbst meist nicht per window.focus() in den Vordergrund holen, wenn der Nutzer gerade in einem anderen Tab oder einer anderen Anwendung ist. Das ist ein Schutz gegen aufdringliche Werbung.
Popup-Blocker: window.open() kann null zurückgeben. Prüfe den Verweis und win.closed, bevor du focus() aufrufst, sonst gibt es einen TypeError.
Fremder Ursprung: focus() gehört zu den wenigen Methoden, die man auch auf Fenstern eines anderen Ursprungs aufrufen darf, etwa über WindowProxy. Event-Listener kann man dort aber nicht registrieren.
Barrierefreiheit: Ungefragte Fokuswechsel verwirren Nutzer mit Screenreadern. Wechsle den Fokus nur als Reaktion auf eine Aktion des Nutzers.
Das Gegenstück window.blur() hat in modernen Browsern praktisch keine Wirkung mehr.

Siehe auch

Window.open() Window.blur() Window.close() Window.closed Document.hasFocus() HTMLElement.focus()