HTMLObjectElement.type — Eigenschaft · JavaScript-Referenz

Signatur

HTMLObjectElement.type

Beschreibung

Die Eigenschaft type des Interfaces HTMLObjectElement spiegelt das HTML-Attribut type eines <object>-Elements wider. Sie enthält den MIME-Typ der Ressource, die über data eingebunden wird, z. B. application/pdf, image/svg+xml oder text/html.

Der Browser nutzt diesen Wert als Hinweis, wie er die Ressource darstellen soll. Er kann schon vor dem Laden entscheiden, ob er den Inhalt anzeigen kann oder gleich den Fallback-Inhalt zwischen den <object>-Tags rendert. Die Eigenschaft ist lesend und schreibend. Beim Setzen wird das Attribut im DOM sofort aktualisiert.

Fehlt das Attribut, liefert die Eigenschaft einen leeren String "". Der Browser prüft den Wert nicht auf Gültigkeit. Er gibt genau die Zeichenkette zurück, die im Markup steht oder zuletzt gesetzt wurde.

Parameter

Name	Typ	Default	Beschreibung
$value	string	""	Nur beim Setzen: neuer MIME-Typ, z. B. `"application/pdf"`. Wird unverändert ins Attribut `type` geschrieben.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des Attributs type. Fehlt das Attribut, ist es ein leerer String.

Beispiele

MIME-Typ eines eingebetteten PDFs auslesen

// HTML: <object id="doc" data="handbuch.pdf" type="application/pdf" width="600" height="400">PDF nicht darstellbar</object>
const obj = document.getElementById('doc');
console.log(obj.type);

application/pdf

Leerer String bei fehlendem Attribut

const obj = document.createElement('object');
obj.data = 'grafik.svg';
console.log(JSON.stringify(obj.type));
console.log(obj.hasAttribute('type'));

"" false

Ressource dynamisch mit passendem Typ einbetten

const mimeByExt = {
  pdf: 'application/pdf',
  svg: 'image/svg+xml',
  html: 'text/html'
};

const embedFile = (container, url) => {
  const ext = url.split('.').pop().toLowerCase();
  const obj = document.createElement('object');
  obj.type = mimeByExt[ext] ?? 'application/octet-stream';
  obj.data = url; // type vor data setzen
  obj.width = '100%';
  obj.height = '500';
  obj.textContent = 'Inhalt kann nicht angezeigt werden.';
  container.replaceChildren(obj);
  return obj;
};

const el = embedFile(document.body, 'bericht.pdf');
console.log(el.getAttribute('type'));

application/pdf

Unterstützung prüfen und Fallback anbieten

const obj = document.querySelector('object');
if (obj.type === 'application/pdf' && !navigator.pdfViewerEnabled) {
  const link = document.createElement('a');
  link.href = obj.data;
  link.textContent = 'PDF herunterladen';
  obj.replaceWith(link);
}

// Wichtig · Fallstricke

Nur ein Hinweis: Liefert der Server einen anderen Content-Type, richten sich die Browser meist nach dem Server-Header. Der Wert von type garantiert also nicht, wie die Ressource tatsächlich verarbeitet wird.
Reihenfolge: Wenn du type änderst, nachdem data gesetzt ist, lädt der Browser die Ressource je nach Engine eventuell nicht neu. Setze deshalb am besten zuerst type und dann data.
Keine Prüfung: Auch ungültige Werte wie "foo" werden ohne Fehler übernommen.
Sicherheit: Ein harmloser type schützt nicht vor aktiven Inhalten. Mit <object> lassen sich HTML- und SVG-Dokumente samt Skripten einbetten. Binde deshalb keine Adressen ein, die ungeprüft von Nutzern stammen. Beschränke die Quellen per CSP mit object-src, idealerweise mit object-src 'none', wenn du das Element nicht brauchst.
Kompatibilität: Alle modernen Browser unterstützen die Eigenschaft. Plugin-Typen wie Flash (application/x-shockwave-flash) funktionieren nicht mehr.

Siehe auch

HTMLEmbedElement.type HTMLObjectElement.name HTMLObjectElement.data HTMLObjectElement.form HTMLObjectElement.width