Window.resizeBy() — Methode · JavaScript-Referenz

Signatur

window.resizeBy(xDelta, yDelta)

Beschreibung

window.resizeBy() vergrößert oder verkleinert das Browserfenster relativ zu seiner aktuellen Größe. Positive Werte vergrößern das Fenster, negative verkleinern es. Die obere linke Ecke bleibt dabei an ihrer Position. Maßgeblich ist die äußere Fenstergröße (window.outerWidth/window.outerHeight), nicht der Anzeigebereich.

Wenn du eine absolute Zielgröße setzen willst, nimm stattdessen window.resizeTo(). Intern entspricht resizeBy(dx, dy) ungefähr resizeTo(outerWidth + dx, outerHeight + dy).

In der Praxis klappt die Methode nur in wenigen Fällen: Moderne Browser erlauben das Ändern der Größe ausschließlich bei Fenstern, die das Skript selbst mit window.open() geöffnet hat und die nur einen einzigen Tab enthalten. Im Hauptfenster oder in Tabs passiert gar nichts, und eine Fehlermeldung gibt es dabei nicht. Deshalb eignet sich resizeBy() vor allem für Popup-Fenster, etwa Hilfefenster, Vorschauen oder Authentifizierungsdialoge.

Parameter

Name	Typ	Default	Beschreibung
$xDelta Pflicht	number		Anzahl der Pixel, um die das Fenster in der Breite wachsen soll. Negative Werte verkleinern das Fenster.
$yDelta Pflicht	number		Anzahl der Pixel, um die das Fenster in der Höhe wachsen soll. Negative Werte verkleinern das Fenster.

Beispiele

Selbst geöffnetes Popup vergrößern

// Popup öffnen – nur solche Fenster darf ein Skript in der Größe ändern
const popup = window.open('/hilfe.html', 'hilfe', 'width=400,height=300');

// Nach dem Laden um 200 × 100 Pixel vergrößern
popup.addEventListener('load', () => {
  popup.resizeBy(200, 100);
  console.log(popup.outerWidth, popup.outerHeight);
});

600 400 (ungefähr, je nach Fensterrahmen)

Popup schrittweise verkleinern und Wirkung prüfen

const vorschau = window.open('about:blank', 'vorschau', 'width=800,height=600');

const verkleinern = () => {
  const vorher = vorschau.outerWidth;
  vorschau.resizeBy(-100, -75);
  // resizeBy liefert keinen Rückgabewert – Erfolg selbst prüfen
  setTimeout(() => {
    const erfolgreich = vorschau.outerWidth !== vorher;
    console.log(erfolgreich ? 'Verkleinert' : 'Vom Browser blockiert');
  }, 100);
};

verkleinern();

Verkleinert

Auf die Größenänderung reagieren

const fenster = window.open('about:blank', 'demo', 'width=500,height=400');

fenster.addEventListener('resize', () => {
  console.log(`Neue Größe: ${fenster.outerWidth}×${fenster.outerHeight}`);
});

document.querySelector('#groesser')?.addEventListener('click', () => {
  fenster.resizeBy(50, 50);
});

Neue Größe: 550×450

// Wichtig · Fallstricke

Starke Einschränkungen: Chrome, Firefox, Safari und Edge ignorieren den Aufruf im Hauptfenster und in Tabs. Er wirkt nur bei Fenstern, die per window.open() geöffnet wurden und nur einen Tab haben. Einen Fehler gibt es dabei nicht.
In Firefox kann die Nutzerin oder der Nutzer das Verschieben und Skalieren von Fenstern über dom.disable_window_move_resize ganz abschalten.
Das Fenster darf nicht kleiner als 100 × 100 Pixel werden und nicht über den verfügbaren Bildschirmbereich (screen.availWidth/availHeight) hinausgehen. Größere oder kleinere Werte werden stillschweigend begrenzt.
Auf Mobilgeräten und in Fenstern im Vollbildmodus hat die Methode meist keine Wirkung.
Die Größenänderung kann asynchron ablaufen. Lies outerWidth deshalb nicht direkt nach dem Aufruf aus, sondern warte auf das resize-Event.
Bei fremden Ursprüngen (cross-origin) scheitert der Zugriff auf das Popup mit einem SecurityError, wenn du es aus dem öffnenden Fenster heraus steuerst.
Aus Sicht der Nutzerfreundlichkeit solltest du Fenster nicht ungefragt verändern. Für responsive Layouts sind CSS-Media-Queries der richtige Weg.

Siehe auch

Window.open() new ProgressEvent() Window.resizeTo() Window.moveBy() Window.scrollBy()