URL.revokeObjectURL() — Methode · JavaScript-Referenz

Signatur

URL.revokeObjectURL(objectURL)

Beschreibung

URL.revokeObjectURL() ist eine statische Methode der URL-Schnittstelle. Sie hebt die Verknüpfung zwischen einer blob:-URL und dem zugehörigen Blob, File oder MediaSource auf. Solange eine Objekt-URL existiert, hält der Browser das referenzierte Objekt im Speicher fest, auch wenn im JavaScript-Code keine Referenz mehr darauf besteht.

Brauchen Sie die URL nicht mehr, sollten Sie sie deshalb immer mit revokeObjectURL() freigeben. Das gilt vor allem, wenn Sie viele Vorschaubilder, Downloads oder Medien-Dateien erzeugen: Ohne Freigabe wächst der Speicherverbrauch, bis das Dokument entladen wird. Erst beim Entladen räumt der Browser alle Objekt-URLs automatisch auf.

Wichtig ist der richtige Zeitpunkt: Nach der Freigabe lässt sich die URL nicht mehr auflösen. Ein <img>, dessen Bild noch nicht geladen ist, oder ein Download, der noch nicht begonnen hat, schlägt dann fehl. Typisch ist deshalb die Freigabe im load-Ereignis des Elements oder kurz nach dem Anstoßen eines Downloads.

Parameter

Name	Typ	Default	Beschreibung
$objectURL Pflicht	string		Die freizugebende `blob:`-URL, wie sie von `URL.createObjectURL()` zurückgegeben wurde.

Beispiele

Bildvorschau einer ausgewählten Datei

const input = document.querySelector('#upload');
const preview = document.querySelector('#preview');

input.addEventListener('change', () => {
  const [file] = input.files;
  if (!file) return;

  const url = URL.createObjectURL(file);
  preview.src = url;

  // Freigeben, sobald das Bild dekodiert ist
  preview.addEventListener('load', () => {
    URL.revokeObjectURL(url);
    console.log('Objekt-URL freigegeben:', url);
  }, { once: true });
});

Objekt-URL freigegeben: blob:https://example.com/3f2a…

Generierte Datei herunterladen und aufräumen

const downloadJson = (data, filename) => {
  const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
  const url = URL.createObjectURL(blob);

  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  document.body.append(a);
  a.click();
  a.remove();

  // Kurz warten, damit der Download sicher gestartet ist
  setTimeout(() => URL.revokeObjectURL(url), 1000);
};

downloadJson({ user: 'anna', punkte: 42 }, 'export.json');

Wechselnde Vorschau ohne Speicherleck

let currentUrl = null;
const video = document.querySelector('video');

const showVideo = (blob) => {
  // Alte URL freigeben, bevor eine neue erzeugt wird
  if (currentUrl) URL.revokeObjectURL(currentUrl);
  currentUrl = URL.createObjectURL(blob);
  video.src = currentUrl;
};

window.addEventListener('pagehide', () => {
  if (currentUrl) URL.revokeObjectURL(currentUrl);
});

// Wichtig · Fallstricke

Zu frühes Freigeben: Wird die URL direkt nach dem Setzen von img.src oder a.click() freigegeben, kann das Laden bzw. der Download in manchen Browsern (vor allem älteren Safari- und Firefox-Versionen) fehlschlagen. Warten Sie auf load oder verzögern Sie die Freigabe.
Kein Fehler bei falschen Werten: Ungültige oder doppelt freigegebene URLs werden stillschweigend ignoriert. Fehler durch Tippfehler fallen deshalb nicht auf.
Gültigkeitsbereich: Objekt-URLs gelten nur im Dokument bzw. Worker, das sie erzeugt hat. In Service Workern ist URL.createObjectURL() nicht verfügbar.
Speicher: Das Freigeben der URL löscht nicht den Blob selbst. Er wird erst von der Speicherbereinigung entfernt, wenn auch keine JavaScript-Referenz mehr darauf zeigt.
Für kleine Daten, die dauerhaft gebraucht werden, kann eine data:-URL über FileReader.readAsDataURL() einfacher sein, da sie nicht freigegeben werden muss.

Siehe auch

URL.createObjectURL() URL Blob File MediaSource FileReader.readAsDataURL() PreferenceObject.override