HTMLObjectElement.data — Eigenschaft · JavaScript-Referenz

Signatur

HTMLObjectElement.data

Beschreibung

Die Eigenschaft data des Interfaces HTMLObjectElement steht für das HTML-Attribut data eines <object>-Elements. Sie gibt die Adresse der eingebetteten Ressource an, etwa ein PDF-Dokument, eine SVG-Grafik, ein Bild oder eine HTML-Seite.

Beim Lesen gibt die Eigenschaft die aufgelöste, absolute URL zurück. Relative Angaben wie docs/handbuch.pdf werden also gegen die Basis-URL des Dokuments aufgelöst. Den unveränderten Attributwert bekommst du mit getAttribute('data'). Fehlt das Attribut, liefert die Eigenschaft einen leeren String.

Beim Schreiben wird das Attribut aktualisiert und der Browser lädt die neue Ressource. Damit kannst du den Inhalt eines <object> zur Laufzeit austauschen, zum Beispiel in einer Dokumentvorschau oder einem Grafik-Viewer. Wie die Ressource dargestellt wird, hängt vom MIME-Typ ab. Den erwarteten Typ kannst du über HTMLObjectElement.type als Hinweis angeben.

Parameter

Name	Typ	Default	Beschreibung
$wert	string	""	Nur beim Setzen: die neue URL der Ressource, relativ oder absolut. Sie wird ins `data`-Attribut geschrieben.

Rückgabewert

Typ

string

Beschreibung

Die aufgelöste, absolute URL aus dem data-Attribut. Ein leerer String, wenn das Attribut fehlt.

Beispiele

URL auslesen: aufgelöst vs. roh

// HTML: <object id="doc" data="docs/handbuch.pdf" type="application/pdf"></object>
// Seite läuft unter https://example.com/app/
const obj = document.getElementById('doc');

console.log(obj.data);                // aufgelöste URL
console.log(obj.getAttribute('data')); // Rohwert

https://example.com/app/docs/handbuch.pdf docs/handbuch.pdf

Dokumentvorschau zur Laufzeit wechseln

const viewer = document.querySelector('object#vorschau');
const auswahl = document.querySelector('select#datei');

auswahl.addEventListener('change', () => {
  viewer.type = 'application/pdf';
  viewer.data = `/dokumente/${encodeURIComponent(auswahl.value)}`;
});

viewer.addEventListener('load', () => {
  console.log('Geladen:', viewer.data);
});

Geladen: https://example.com/dokumente/rechnung-2024.pdf

<object> dynamisch erzeugen, mit Fallback

const obj = document.createElement('object');
obj.type = 'image/svg+xml';
obj.data = '/grafiken/logo.svg';
obj.width = 200;
obj.height = 80;
// Fallback-Inhalt, falls die Ressource nicht dargestellt werden kann
obj.textContent = 'Logo konnte nicht geladen werden.';

obj.addEventListener('error', () => console.warn('Fehler beim Laden von', obj.data));
document.body.append(obj);
console.log(obj.data.endsWith('/grafiken/logo.svg'));

true

// Wichtig · Fallstricke

Aufgelöste URL: Der Getter liefert immer die absolute URL. Wenn du Strings vergleichen oder den Originalwert brauchst, nimm getAttribute('data').
Sicherheit: Setze niemals ungeprüfte Benutzereingaben als data. Über javascript:-URLs oder eingebettete HTML-/SVG-Dokumente mit Skripten kann sonst XSS entstehen. Prüfe das Protokoll und den Ursprung vorher, zum Beispiel mit new URL(wert, location.href). Zusätzlich kannst du per CSP-Direktive object-src einschränken, woher eingebettete Ressourcen kommen dürfen. Oft empfiehlt sich dort 'none' oder eine strenge Allowlist.
Same-Origin: Auf das eingebettete Dokument (contentDocument) kannst du nur zugreifen, wenn es denselben Ursprung hat.
Plugins: Browser-Plugins wie Flash werden nicht mehr unterstützt. Moderne Browser zeigen per <object> nur noch native Formate an (Bilder, SVG, HTML, meist PDF). Für PDFs in mobilen Browsern immer einen Fallback-Inhalt vorsehen.
Die Eigenschaft wird von allen gängigen Browsern seit Langem unterstützt.

Siehe auch

HTMLMeterElement.value HTMLObjectElement.name HTMLObjectElement.form HTMLObjectElement.type HTMLObjectElement.width