Signatur
Beschreibung
window.self verweist auf das globale Fensterobjekt selbst. Im Hauptkontext einer Seite gilt daher window.self === window, ebenso self === window. Rückgabewert ist ein WindowProxy, also dasselbe Objekt, das man auch über window, globalThis oder frames erhält.
Wirklich nützlich wird self, weil es auch in Web Workern existiert: Dort gibt es kein window, self verweist aber auf das globale WorkerGlobalScope (z. B. DedicatedWorkerGlobalScope oder ServiceWorkerGlobalScope). Code, der sowohl im Fenster als auch in Workern laufen soll, kann also über self auf den globalen Gültigkeitsbereich zugreifen.
Ein weiterer klassischer Einsatzzweck ist das Erkennen, ob eine Seite in einem <iframe> läuft: Der Vergleich window.self !== window.top ist genau dann wahr, wenn das aktuelle Dokument eingebettet ist.
In modernem Code, der plattformübergreifend (Browser, Worker, Node.js) laufen muss, ist globalThis (ES2020) die bessere Wahl, da self in Node.js nicht definiert ist.
Rückgabewert
window). In Workern liefert self stattdessen den jeweiligen WorkerGlobalScope.Beispiele
Identität von self und window prüfen
// Im Hauptkontext einer Seite
console.log(window.self === window);
console.log(self === window);
console.log(self === globalThis);
console.log(window.self.self.self === window);Erkennen, ob die Seite in einem iframe läuft
const isEmbedded = () => {
try {
return window.self !== window.top;
} catch {
// Zugriff auf window.top kann bei Cross-Origin-Sandboxing scheitern
return true;
}
};
if (isEmbedded()) {
document.body.classList.add('embedded');
console.log('Seite läuft eingebettet in einem Frame.');
} else {
console.log('Seite läuft als Top-Level-Dokument.');
}self im Web Worker nutzen
// main.js
const workerCode = `
self.addEventListener('message', (event) => {
const summe = event.data.reduce((a, b) => a + b, 0);
self.postMessage(summe);
});
`;
const blob = new Blob([workerCode], { type: 'text/javascript' });
const worker = new Worker(URL.createObjectURL(blob));
worker.addEventListener('message', (event) => {
console.log('Ergebnis vom Worker:', event.data);
});
worker.postMessage([1, 2, 3, 4]);Umgebungsunabhängigen globalen Kontext ermitteln
const getGlobal = () => {
if (typeof globalThis !== 'undefined') return globalThis;
if (typeof self !== 'undefined') return self; // Fenster & Worker
if (typeof window !== 'undefined') return window; // ältere Browser
if (typeof global !== 'undefined') return global; // Node.js
throw new Error('Globales Objekt nicht gefunden');
};
console.log(getGlobal() === self);// Wichtig · Fallstricke
- Nicht in Node.js:
selfist in Node.js nicht definiert (außer in neueren Versionen teilweise über Web-Kompatibilitäts-Globals nicht garantiert). Für universellen CodeglobalThisverwenden. - Überschreibbar:
selfist zwar als Leseeigenschaft spezifiziert, eine lokale Variable namensself(z. B. das verbreitete Musterconst self = this;) verdeckt aber das globaleself. Das führt leicht zu Verwechslungen – in modernem Code besser Pfeilfunktionen stattconst self = thisnutzen. - iframe-Erkennung:
window.self !== window.topist zuverlässig, ersetzt aber keinen Clickjacking-Schutz. Dafür serverseitigContent-Security-Policy: frame-ancestorsbzw.X-Frame-Optionssetzen. - Kompatibilität: In allen Browsern seit jeher unterstützt; in Workern ebenfalls überall verfügbar.