Visuelle Inhaltsfragmente - Versand über die Veröffentlichungs-URL visual-content-fragments-deliver-with-the-publish-url

Beim Veröffentlichen eines Inhaltsfragments, das auf einem Modell mit angehängten HTML-Vorlagen basiert, wird die gerenderte HTML dieses Fragments über die as a Cloud Service-Veröffentlichungsebene von Adobe Experience Manager (AEM) unter einer URL dieser Struktur verfügbar gemacht:

https://publish-p<programId>-e<envId>.adobeaemcloud.com/adobe/stable/previewtemplates/contentFragments/<templateId>/<fragmentId>/<variation>.html

Diese URL gibt ein eigenständiges HTML-Dokument (einschließlich Inline-CSS und -Struktur) zurück, das in jeden Web-Kontext eingebettet werden kann.

Einbettungstechniken - Übersicht embedding-techniques-overview

Es gibt drei verschiedene Ansätze, um HTML aus einem visuellen Inhaltsfragment auf einer Hostseite zu verwenden. Jede Version weist unterschiedliche Merkmale in Bezug auf Stilistische Isolation, Layout-Verhalten, Barrierefreiheit und Komplexität auf.

Inline-Element (fetch + innerHTML) inline-element-fetch-and-innerhtml

Der einfachste Ansatz:

Beispiel für das Einbetten von Inline-Elementen:

<div id="cf-container"></div>
<script>
  fetch("<publish-url>")
    .then(r => r.ok ? r.text() : Promise.reject(r.status))
    .then(html => {
      document.getElementById("cf-container").innerHTML = html;
    })
    .catch(err => console.error("Failed to load fragment", err));
</script>

Verwendung:

iframe iframe

Laden Sie die Veröffentlichungs-URL direkt als src einer <iframe>. Es ist keine JavaScript erforderlich.

Beispiel für die iFrame-Einbettung:

<iframe
  src="<publish-url>"
  title="Content Fragment Preview"
  width="100%"
  height="600"
  frameborder="0"
  style="border: none;"
></iframe>

Sie können auch die Größe des iframe automatisch ändern (optional).

Verwenden Sie ein postMessage oder eine entsprechende Bibliothek, um die Größe des iframe dynamisch an die Inhaltshöhe anzupassen (Bildlaufleisten werden vermieden).

Ein Beispiel für einen schlanken Ansatz ist:

<iframe id="cf-iframe" src="<publish-url>" title="Content Fragment Preview"
  width="100%" frameborder="0" style="border:none; overflow:hidden;"
  onload="this.style.height = this.contentDocument.documentElement.scrollHeight + 'px';"
></iframe>

Verwendung:

Benutzerdefiniertes Element + Shadow-DOM (empfohlen) custom-element-and-shadow-dom-recommended

Definieren Sie ein wiederverwendbares <cf-visualization> benutzerdefiniertes Element, das die Veröffentlichungs-URL abruft und die HTML in einen gekapselten Shadow-DOM-Stamm einfügt.

Dieses Element bietet:

Um das benutzerdefinierte Element zu definieren, schließen Sie das folgende Skript einmal pro Seite ein. Alle <cf-visualization> auf der Seite verwenden diese Definition:

<script>
  class CfVisualization extends HTMLElement {
    connectedCallback() {
      const src = this.getAttribute("src");
      if (!src) return;

      const shadow = this.attachShadow({ mode: "open" });

      fetch(src)
        .then((r) => (r.ok ? r.text() : Promise.reject(r.status)))
        .then((html) => {
          shadow.innerHTML = html;
        })
        .catch((err) => {
          console.error("cf-visualization: failed to load", src, err);
        });
    }
  }

  if (!customElements.get("cf-visualization")) {
    customElements.define("cf-visualization", CfVisualization);
  }
</script>

So verwenden Sie das benutzerdefinierte Element:

<cf-visualization src="<publish-url>"></cf-visualization>

Verwendung:

Integration mit Edge Delivery Services (Einbettungsblock) integration-with-edge-services-embed-block

In Edge Delivery Services wird die Veröffentlichungs-URL über einen Einbettungsblock genutzt, der sie als <iframe> rendert.

Integration - AEM Sites mit Kernkomponenten integration-aem-sites-with-core-components

Die Inhaltsfragment-Kernkomponente (core/wcm/components/contentfragment/v1/contentfragment) verfügt über integrierte Unterstützung für die Wiedergabe visueller Inhaltsfragmente mithilfe der Kundenelement + Schatten-DOM-Technik.

Funktionsweise:

Integration mit externen Sites integration-with-external-sites

Verwenden Sie für Nicht-AEM-Websites die Technik Kundenelement + Shadow-DOM. Dadurch erhalten Sie eine saubere, deklarative Integration ohne Framework-Abhängigkeiten.

Ein Beispiel:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Product Page</title>
</head>
<body>
  <h1>Product Details</h1>
  <p>Some host-page content here...</p>

  <!-- Embed the Content Fragment visualization -->
  <cf-visualization
    src="https://publish-p12345-e67890.adobeaemcloud.com/adobe/experimental/previewtemplates-expires-20260301/contentFragments/product_template/abc-123/master.html"
  ></cf-visualization>

  <p>More host-page content below the fragment...</p>

  <!-- Custom Element definition (include once) -->
  <script>
    class CfVisualization extends HTMLElement {
      connectedCallback() {
        const src = this.getAttribute("src");
        if (!src) return;
        const shadow = this.attachShadow({ mode: "open" });
        fetch(src)
          .then(r => r.ok ? r.text() : Promise.reject(r.status))
          .then(html => { shadow.innerHTML = html; })
          .catch(err => console.error("cf-visualization: failed to load", src, err));
      }
    }
    if (!customElements.get("cf-visualization")) {
      customElements.define("cf-visualization", CfVisualization);
    }
  </script>
</body>
</html>

CORS und Sicherheitsüberlegungen cors-and-security-considerations

Wählen Sie die entsprechende Technik aus choose-the-appropriate-technique

Verwenden Sie Folgendes als Entscheidungshandbuch, um die geeignete Methode auszuwählen:

Zusätzliche Ressourcen additional-resources

Zusätzliche Ressourcen sind verfügbar: