Window.sizeToContent() — Methode · JavaScript-Referenz

Signatur

Window.prototype.sizeToContent()

Beschreibung

window.sizeToContent() ändert die äußere Größe eines Fensters so, dass sein Inhalt ohne Scrollbalken und ohne unnötigen Leerraum hineinpasst. Der Browser misst dazu die bevorzugte Größe des Dokuments und ändert Breite und Höhe des Fensters entsprechend. Das entspricht einem automatisch berechneten window.resizeTo().

Gedacht war die Methode vor allem für kleine Popup-Fenster, die mit window.open() geöffnet werden, etwa Dialoge, Hilfefenster oder Vorschauen, deren Inhalt erst zur Laufzeit feststeht. Innerhalb von Firefox selbst (XUL- und Chrome-Code) wird sie bis heute für Dialogfenster genutzt.

Für Webseiten ist sizeToContent() nicht geeignet. Die Methode ist in keinem Standard beschrieben, andere Browser haben sie nie unterstützt, und Firefox beschränkt sie für normale Webinhalte stark oder stellt sie dort gar nicht mehr bereit. Wer ein Popup an seinen Inhalt anpassen will, misst die Größe des Inhalts selbst (zum Beispiel über document.documentElement.scrollWidth/scrollHeight) und ruft dann window.resizeTo() oder window.resizeBy() auf. Noch besser ist meist ein Dialog innerhalb der Seite mit <dialog>.

Beispiele

Popup an seinen Inhalt anpassen, mit Prüfung auf Unterstützung

// Läuft im Popup, das zuvor mit window.open() geöffnet wurde
const fitWindow = () => {
  if (typeof window.sizeToContent === 'function') {
    window.sizeToContent();
    console.log('sizeToContent() aufgerufen');
  } else {
    console.log('sizeToContent() wird nicht unterstützt');
  }
};

window.addEventListener('load', fitWindow);

sizeToContent() wird nicht unterstützt // Chrome, Safari, Edge und aktuelles Firefox

Browserübergreifender Ersatz mit resizeTo()

// Popup öffnen und an seinen Inhalt anpassen, ohne sizeToContent()
const popup = window.open('', 'info', 'popup,width=200,height=100');

popup.document.body.innerHTML = `
  <h1>Hinweis</h1>
  <p>Ihre Änderungen wurden gespeichert.</p>
`;

const fitPopup = (win) => {
  const doc = win.document.documentElement;
  // Unterschied zwischen äußerer und innerer Größe = Fensterrahmen und Leisten
  const chromeW = win.outerWidth - win.innerWidth;
  const chromeH = win.outerHeight - win.innerHeight;
  win.resizeTo(doc.scrollWidth + chromeW, doc.scrollHeight + chromeH);
};

fitPopup(popup);
console.log(popup.innerWidth, popup.innerHeight);

z. B. 320 140

Zuerst sizeToContent(), sonst Ersatzlösung

const autoSize = (win = window) => {
  if (typeof win.sizeToContent === 'function') {
    try {
      win.sizeToContent();
      return 'sizeToContent';
    } catch (err) {
      console.warn('sizeToContent() blockiert:', err.message);
    }
  }
  const { scrollWidth, scrollHeight } = win.document.documentElement;
  win.resizeTo(
    scrollWidth + (win.outerWidth - win.innerWidth),
    scrollHeight + (win.outerHeight - win.innerHeight)
  );
  return 'resizeTo';
};

console.log(autoSize());

resizeTo

// Wichtig · Fallstricke

Nicht standardisiert und veraltet: Die Methode gibt es nur in Gecko/Firefox. Chrome, Edge, Safari und Opera haben sie nie unterstützt. Neuere Firefox-Versionen stellen sie normalen Webinhalten nicht mehr bereit. Prüfen Sie deshalb immer mit typeof window.sizeToContent === 'function', bevor Sie sie aufrufen.
Nur bei Popups: Wie bei resizeTo() und resizeBy() dürfen Skripte nur die Größe von Fenstern ändern, die sie selbst mit window.open() geöffnet haben und die nur einen Tab enthalten. Hauptfenster und Tabs bleiben unverändert, und es gibt dabei keine Fehlermeldung.
Die Benutzereinstellung dom.disable_window_move_resize in Firefox kann jede Größenänderung durch Skripte unterbinden.
Rufen Sie die Methode erst auf, wenn der Inhalt vollständig geladen ist, zum Beispiel beim Ereignis load. Nachgeladene Bilder oder Schriften ändern die Größe des Inhalts sonst noch nachträglich.
Fenster, deren Größe sich ohne Zutun ändert, stören Nutzer und Nutzerinnen und schaden der Barrierefreiheit. Meist ist ein <dialog>-Element innerhalb der Seite die bessere Wahl.

Siehe auch

Window.open() new NotificationEvent() Window.fetchLater() Window.resizeTo() Window.setInterval()