Signatur
Beschreibung
Die Eigenschaft src des Interfaces HTMLEmbedElement spiegelt das HTML-Attribut src eines <embed>-Elements wider. Sie enthält die Adresse der eingebetteten Ressource, zum Beispiel eines PDF-Dokuments, einer SVG-Grafik oder eines Mediums, das der Browser mit einem Plugin oder einem eingebauten Betrachter darstellt.
Beim Lesen gibt die Eigenschaft die absolute, aufgelöste URL zurück, selbst wenn im Attribut nur ein relativer Pfad wie docs/handbuch.pdf steht. Den Rohwert des Attributs bekommst du mit getAttribute("src"). Fehlt das Attribut, liefert die Eigenschaft einen leeren String.
Beim Schreiben wird das Attribut aktualisiert, und der Browser lädt die neue Ressource. So kannst du zum Beispiel in einem Dokumentbetrachter zwischen mehreren PDF-Dateien wechseln, ohne das Element neu anzulegen. Häufig verwendet man src zusammen mit type, damit der Browser den passenden Betrachter auswählt.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | string | Nur beim Setzen: neue URL der Ressource, relativ oder absolut. Relative Angaben werden anhand der Basis-URL des Dokuments aufgelöst. |
Rückgabewert
"", wenn kein src-Attribut gesetzt ist.Beispiele
URL auslesen: aufgelöst vs. Rohwert
// HTML: <embed id="doc" src="docs/handbuch.pdf" type="application/pdf">
// Seite läuft unter https://example.com/app/
const embed = document.getElementById("doc");
console.log(embed.src); // aufgelöste URL
console.log(embed.getAttribute("src")); // Rohwert aus dem HTMLPDF-Betrachter mit Dateiauswahl
// HTML:
// <select id="auswahl">
// <option value="pdf/rechnung.pdf">Rechnung</option>
// <option value="pdf/vertrag.pdf">Vertrag</option>
// </select>
// <embed id="viewer" type="application/pdf" width="800" height="600">
const viewer = document.getElementById("viewer");
const auswahl = document.getElementById("auswahl");
const zeige = (pfad) => {
viewer.src = pfad; // löst das Laden der neuen Datei aus
};
auswahl.addEventListener("change", (e) => zeige(e.target.value));
zeige(auswahl.value);embed-Element dynamisch erzeugen
const erstelleEmbed = (url, mimeType) => {
const embed = document.createElement("embed");
embed.type = mimeType; // type vor src setzen
embed.src = url;
embed.width = "400";
embed.height = "300";
return embed;
};
const grafik = erstelleEmbed("/img/diagramm.svg", "image/svg+xml");
document.body.append(grafik);
console.log(grafik.src);Prüfen, ob eine Quelle gesetzt ist
const embed = document.createElement("embed");
console.log(embed.src === ""); // noch kein Attribut
console.log(embed.hasAttribute("src"));
embed.src = "video/intro.mp4";
console.log(embed.hasAttribute("src"));// Wichtig · Fallstricke
- Aufgelöste URL: Beim Lesen bekommst du immer eine absolute URL. Wenn du Werte vergleichen willst, nimm
getAttribute("src")oder normalisiere beide Seiten mitnew URL(...). - Neues Laden beim Setzen: Jede Zuweisung kann einen neuen Ladevorgang auslösen. Browser verhalten sich hier unterschiedlich: Manche laden die Ressource erst neu, wenn das Element erneut in das DOM eingefügt wird. Sicherer ist es, das Element zu ersetzen.
- Keine Ereignisse für Ladefehler:
<embed>hat kein zuverlässigeserror-Ereignis und keinen Fallback-Inhalt. Wenn du Fehler behandeln musst, ist<object>oder<iframe>oft die bessere Wahl. - Sicherheit: Übernimm keine URLs ungeprüft aus Benutzereingaben oder Query-Parametern.
javascript:-URLs und fremde Quellen können ein Sicherheitsrisiko sein. Schränke die erlaubten Quellen per CSP ein (object-src, das auch für<embed>gilt) und prüfe Protokoll und Host mitnew URL(). - Plugins: Klassische NPAPI-Plugins wie Flash werden nicht mehr unterstützt. Heute zeigt
<embed>praktisch nur noch Inhalte mit eingebauten Betrachtern an (PDF, SVG, Bilder, teilweise Medien). Auf Mobilgeräten werden PDFs oft nicht eingebettet angezeigt. - Kompatibilität: Die Eigenschaft wird von allen modernen Browsern unterstützt.