Eingebetteter Inhalt

7.1 Element <iframe>

Das <iframe>-Element in HTML wird verwendet, um ein anderes HTML-Dokument in das aktuelle Dokument einzubetten. Dies ermöglicht das Anzeigen von Inhalten anderer Webseiten innerhalb des Hauptdokuments und bietet die Möglichkeit zur Integration verschiedener Ressourcen wie Videos, Karten, Dokumente und andere Webseiten.

Das <iframe>-Element erstellt einen eingebetteten Frame, der ein anderes HTML-Dokument anzeigen kann. Dieses Dokument kann von jeder URL geladen werden und funktioniert unabhängig vom Hauptdokument.

Syntax:

    
      <iframe src="URL"></iframe>
    
  

Beispielverwendung:

    
      <iframe src="https://www.example.com" width="600" height="400" title="Beispiel iframe"></iframe>
    
  

Attribute

• src: URL-Adresse des Dokuments, das im <iframe> geladen wird
• width: Breite des Frames (kann in Pixeln oder Prozent angegeben werden)
• height: Höhe des Frames (kann in Pixeln oder Prozent angegeben werden)
• title: kurze Beschreibung des Frame-Inhalts (wichtig für die Barrierefreiheit)
• name: Name des Frames, der für das Targeting von Links und Formularen verwendet werden kann
• sandbox: setzt Einschränkungen für den Frame-Inhalt, um die Sicherheit zu erhöhen
• allow: definiert, welche Funktionen im <iframe> verwendet werden dürfen (z.B. allowfullscreen für den Vollbildmodus)

7.2 Attribut allowfullscreen

Das Attribut allowfullscreen ermöglicht den Vollbildmodus für Inhalte, die im <iframe> geladen werden. Ohne dieses Attribut kann der Inhalt nicht in den Vollbildmodus wechseln.

Syntax:

    
      <iframe src="https://www.example.com" allowfullscreen></iframe>
    
  

Beispielverwendung:

    
      <iframe
        width="560"
        height="315"
        src="https://www.youtube.com/embed/dQw4w9WgXcQ"
        allowfullscreen>
      </iframe>
    
  

Der Vollbildmodus ermöglicht es dem Benutzer, Videos oder andere Ressourcen im Vollbildmodus zu betrachten, was die Benutzererfahrung verbessert.

7.3 Attribut allow

Das Attribut allow definiert, welche Funktionen im <iframe> verwendet werden dürfen, wie z.B. Zugriff auf die Geolokalisierung, Kamera, Mikrofon und den Vollbildmodus.

Syntax:

    
      allow="geolocation; microphone; camera; fullscreen"
    
  

Beispielverwendung:

    
      <iframe
        src="https://www.example.com"
        allow="geolocation; microphone; camera; fullscreen">
      </iframe>
    
  

Vorteile:

• Kontrolle über die Funktionalität: ermöglicht die Angabe, welche Funktionen und APIs vom eingebetteten Inhalt genutzt werden dürfen
• Verwaltung von Berechtigungen: bietet Flexibilität bei der Verwaltung des Zugriffs auf verschiedene Funktionen, wie Geolokalisierung und Kamera

7.4 Attribut sandbox

Das Attribut sandbox wird verwendet, um Beschränkungen auf den Inhalt anzuwenden, der im <iframe> geladen wird. Es verhindert die Ausführung bestimmter Aktionen, wie das Ausführen von Skripten oder das Öffnen von Popups, und erhöht so die Sicherheit.

Syntax:

    
      sandbox="allow-scripts allow-same-origin"
    
  

Werte des sandbox-Attributs:

• allow-forms: erlaubt das Senden von Formularen
• allow-modals: erlaubt die Verwendung von Modalenfenstern
• allow-orientation-lock: erlaubt das Sperren der Bildschirmorientierung
• allow-pointer-lock: erlaubt das Einrasten des Zeigers
• allow-popups: erlaubt das Öffnen von Popups
• allow-popups-to-escape-sandbox: erlaubt Popups, aus der Sandbox zu entkommen
• allow-presentation: erlaubt den Zugriff auf Präsentations-APIs
• allow-same-origin: erlaubt die Ausführung von Skripten aus derselben Quelle
• allow-scripts: erlaubt die Ausführung von Skripten
• allow-storage-access-by-user-activation: erlaubt den Zugriff auf Speicher durch Benutzeraktivierung
• allow-top-navigation: erlaubt die Navigation auf oberster Ebene
• allow-top-navigation-by-user-activation: erlaubt die Navigation auf oberster Ebene durch Benutzeraktivierung

Beispielverwendung:

    
      <iframe
        src="https://www.example.com"
        sandbox="allow-scripts allow-same-origin">
      </iframe>
    
  

Vorteile:

• Sicherheit: verhindert die Ausführung potenziell schädlicher Skripte und beschränkt die Funktionalität eingebetteter Inhalte
• Zugriffskontrolle: ermöglicht es Entwicklern, genau anzugeben, welche Funktionen für den eingebetteten Inhalt erlaubt sind

7.5 Attribut loading

Das Attribut loading steuert, wie das <iframe> geladen wird, und erlaubt das verzögerte Laden, bis das Element auf dem Bildschirm sichtbar wird (Lazy Loading).

Werte des loading-Attributs:

• lazy: verzögert das Laden des <iframe>, bis das Element sichtbar wird
• eager: das <iframe> wird sofort geladen, unabhängig von seiner Sichtbarkeit

Syntax:

    
      loading="status"
    
  

Beispielverwendung:

    
      <iframe
        src="https://www.example.com"
        width="600"
        height="400"
        loading="lazy">
      </iframe>
    
  

Vorteile:

• Optimierung der Leistung: Lazy Loading reduziert die Menge der geladenen Daten und beschleunigt die Ladezeit der Seite
• Reduzierung des Ressourcenverbrauchs: ermöglicht das Laden nur der Elemente, die der Benutzer tatsächlich sieht und verwendet