Signatur
Beschreibung
Die schreibgeschützte Eigenschaft window.outerHeight gibt die äußere Höhe des Browserfensters als ganze Zahl in CSS-Pixeln zurück. Anders als window.innerHeight, das nur den sichtbaren Inhaltsbereich (Viewport) misst, gehört hier die gesamte „Browser-Oberfläche“ dazu: Titelleiste, Tab-Leiste, Adressleiste, Lesezeichenleiste, gegebenenfalls Seitenleisten sowie Fensterrahmen und Griffe zum Ändern der Größe.
Nützlich ist der Wert vor allem, wenn man die Höhe der Browser-Oberfläche abschätzen will (outerHeight - innerHeight), Popup-Fenster mit window.open() passend platzieren möchte oder einfache Heuristiken braucht, etwa um zu erkennen, ob die Entwicklerwerkzeuge angedockt geöffnet sind.
Für responsives Layout ist outerHeight dagegen nicht geeignet – dafür gibt es innerHeight, document.documentElement.clientHeight, CSS-Media-Queries oder window.visualViewport. Die Eigenschaft lässt sich nicht setzen; um die Fenstergröße zu ändern, dient window.resizeTo() bzw. window.resizeBy() (nur bei selbst geöffneten Popups).
Rückgabewert
Beispiele
Äußere und innere Fensterhöhe vergleichen
const aussen = window.outerHeight;
const innen = window.innerHeight;
console.log(`Fensterhöhe gesamt: ${aussen}px`);
console.log(`Viewport-Höhe: ${innen}px`);
console.log(`Browser-Oberfläche (ca.): ${aussen - innen}px`);Popup vertikal zentriert zum aktuellen Fenster öffnen
const oeffnePopup = (url, breite = 500, hoehe = 600) => {
const top = window.screenY + (window.outerHeight - hoehe) / 2;
const left = window.screenX + (window.outerWidth - breite) / 2;
return window.open(
url,
'login',
`popup,width=${breite},height=${hoehe},top=${Math.round(top)},left=${Math.round(left)}`
);
};
document.querySelector('#login-btn')?.addEventListener('click', () => {
oeffnePopup('https://example.com/login');
});Heuristik: angedockte Entwicklerwerkzeuge erkennen
const devToolsVermutlichOffen = () => {
const schwelle = 200; // Toleranz für normale Symbolleisten
const hoehenDiff = window.outerHeight - window.innerHeight;
const breitenDiff = window.outerWidth - window.innerWidth;
return hoehenDiff > schwelle || breitenDiff > schwelle;
};
window.addEventListener('resize', () => {
console.log('DevTools offen?', devToolsVermutlichOffen());
});// Wichtig · Fallstricke
- Schreibgeschützt: Eine Zuweisung wie
window.outerHeight = 800hat keine Wirkung auf das Fenster. Größenänderungen gehen nur perresizeTo()/resizeBy()und auch nur bei perwindow.open()erzeugten Popups. - Zoom: Der Wert wird in CSS-Pixeln angegeben und ändert sich daher beim Zoomen (
Strg++), obwohl das physische Fenster gleich groß bleibt. - Mobile Browser: Auf Smartphones und Tablets entspricht
outerHeightoft dem Bildschirm bzw. liefert wenig aussagekräftige Werte; ein- und ausblendende Adressleisten machen die Differenz zuinnerHeightunzuverlässig. - Iframes: Innerhalb eines Iframes wird die Höhe des äußeren Browserfensters geliefert, nicht die des Iframes.
- Datenschutz: Einige Browser (z. B. Firefox mit
privacy.resistFingerprinting, Tor Browser) runden oder fälschen den Wert, um Fingerprinting zu erschweren – nicht für sicherheitskritische Logik verwenden. - DevTools-Erkennung über die Höhendifferenz ist nur eine Heuristik und schlägt bei abgekoppelten Entwicklerwerkzeugen fehl.