HTMLEmbedElement.type — Eigenschaft · JavaScript-Referenz

Signatur

HTMLEmbedElement.type

Beschreibung

Die Eigenschaft type des Interfaces HTMLEmbedElement spiegelt das HTML-Attribut type des <embed>-Elements wider. Sie enthält den MIME-Typ der Ressource, die über src eingebunden wird, zum Beispiel "application/pdf", "image/svg+xml" oder "video/mp4".

Der Browser wählt anhand des MIME-Typs aus, welcher Handler oder eingebaute Betrachter die Ressource darstellt. Ist type nicht gesetzt, verlässt sich der Browser auf den Content-Type-Header der Serverantwort. Wenn du type ausdrücklich setzt, hilft das bei Ressourcen, deren Server falsche oder allgemeine Header wie application/octet-stream sendet.

Die Eigenschaft kann gelesen und geschrieben werden. Eine Zuweisung ändert direkt das Attribut im DOM. Fehlt das Attribut, liefert die Eigenschaft einen leeren String. Der Wert wird nicht geprüft oder normalisiert: Er wird genau so zurückgegeben, wie er im Markup steht.

Rückgabewert

Typ

string

Beschreibung

Der MIME-Typ aus dem type-Attribut, oder ein leerer String "", wenn das Attribut fehlt.

Beispiele

MIME-Typ eines vorhandenen embed-Elements auslesen

// HTML: <embed id="doc" src="/files/handbuch.pdf" type="application/pdf" width="600" height="400">
const embed = document.getElementById('doc');
console.log(embed.type);
console.log(embed.getAttribute('type') === embed.type);

application/pdf true

embed-Element dynamisch mit Typ erzeugen

const showSvg = (url, container) => {
  const embed = document.createElement('embed');
  embed.src = url;
  embed.type = 'image/svg+xml';
  embed.width = '300';
  embed.height = '200';
  container.append(embed);
  return embed;
};

const el = showSvg('/img/diagramm.svg', document.body);
console.log(el.outerHTML);

Alle PDF-Einbettungen auf der Seite finden

const pdfEmbeds = [...document.querySelectorAll('embed')]
  .filter((e) => e.type.trim().toLowerCase() === 'application/pdf');

console.log(`${pdfEmbeds.length} PDF(s) eingebettet`);
pdfEmbeds.forEach((e) => console.log(e.src));

2 PDF(s) eingebettet https://example.com/files/a.pdf https://example.com/files/b.pdf

Fehlendes Attribut ergibt leeren String

const embed = document.createElement('embed');
console.log(JSON.stringify(embed.type));
console.log(embed.hasAttribute('type'));

"" false

// Wichtig · Fallstricke

Keine Prüfung: Der Browser nimmt jeden String an, auch einen ungültigen MIME-Typ. Die Groß- und Kleinschreibung bleibt erhalten. Für Vergleiche solltest du den Wert deshalb mit toLowerCase() normalisieren.
Nachträgliche Änderung: Wenn du type bei einem schon geladenen Element änderst, lädt nicht jeder Browser die Ressource zuverlässig neu. Sicherer ist es, ein neues Element zu erzeugen oder zusätzlich src neu zu setzen.
Plugins: Seit dem Ende von NPAPI-Plugins wie Flash oder Java werden praktisch nur noch Typen dargestellt, die der Browser selbst unterstützt (PDF, SVG, Bilder, HTML, teilweise Medien). Für Plugin-Typen wie application/x-shockwave-flash wird nichts mehr angezeigt.
Mobil: Viele mobile Browser zeigen PDFs in <embed> nicht inline an. Plane einen Link zum Herunterladen als Ausweichlösung ein.
Sicherheit: Die Angabe in type ist keine Sicherheitsgrenze. Maßgeblich bleiben der Server-Header und die CSP-Direktive object-src, die auch <embed> betrifft.
Die Eigenschaft wird von allen modernen Browsern unterstützt.

Siehe auch

HTMLEmbedElement.height HTMLEmbedElement.src HTMLEmbedElement.width HTMLInputElement.type HTMLLinkElement.type