Bücher online kostenlos Kostenlos Online Lesen
HTML5-Handbuch - die neuen Features von HTML5

HTML5-Handbuch - die neuen Features von HTML5

Titel: HTML5-Handbuch - die neuen Features von HTML5 Kostenlos Bücher Online Lesen
Autoren: Franzis
Vom Netzwerk:
fremden Server eingebunden, mit allen Restriktionen der Same-Origin-Policy. Zweitens enthält es ein
seamless
-Attribut, um seinen Inhalt nahtlos in die Webseite zu inkludieren, und drittens das
srcdoc
-Attribut. Dieses Attribut enthält den gesamten HTML-Code des einzubindenden Inhalts. Es kann sich dabei auch um umfangreichere Inhalte mit viel HTML-Code handeln.
Der HTML5-Standard schreibt lediglich vor, dass die Zeichen
"
und
&
innerhalb der Wertzuweisung durch ihre benannten HTML-Entitäten
"
bzw.
&
umschrieben werden müssen.
Vollbildvergrößerung von eingebetteten Frames (HTML5)
    Wenn Sie als Anwender auf dem Videoportal YouTube bei einem Video die Funktion »Teilen« und dann »Einbetten« wählen, erhalten Sie den HTML-Code zum Einbetten des Videos in eigene Webseiten. Dabei wird auch die Möglichkeit mitgeliefert, das eingebettete Video auf Vollbild zu vergrößern.
Beispiel (Original wie von YouTube angeboten)
    
Erläuterung
    Wenn Sie das Standalone-Attribut allowfullscreen (oder
allowfullscreen="true"
) im Start-Tag eines iframe-Elements notieren, erlauben Sie dem im Frame eingebetteten Inhalt, sich auf die volle Bildschirmgröße bringen zu dürfen. Gedacht ist das fürAnwendungsfälle wie Präsentationen, ablenkungsfreies Editieren oder eben für Videos. Beenden kann der Anwender den Vollbild-Modus in der Regel mit der Escape-Taste.
    Die Funktionalität, um den
iframe
-Inhalt tatsächlich auf Vollbildgröße zu bringen, muss im eingebetteten Inhalt des Frames bereitgestellt werden. Dazu ist Scripting erforderlich.
Beispiel
    
    
    
    Eingebetter Inhalt
    
    
    
    

Vollbild


    
    
Erläuterung
    Das Beispiel zeigt ein HTML-Dokument, das als Inhalt in einem
iframe
eingebettet werden soll, der mit
allowfullscreen
ausgezeichnet wird. Das Dokument enthält einen Hyperlink (

), bei dessen Anklicken die JavaScript-Funktion
FullScreen()
aufgerufen wird. Diese Funktion ist im gleichen Dokument oberhalb in einem Scriptbereich notiert. Die Funktion fragt ab, ob sich das Dokument nicht schon im Vollbildmodus befindet. Wenn nicht, wird die Dokument-Element-Objektmethode
requestFullScreen()
aufgerufen. Diese wurde mit HTML5 neu in das Document Object Model (DOM) für HTML aufgenommen. Da die Implementierung der Vollbild-Funktionalität in den Browsern derzeit noch in der Testphase ist, lässt sich die Funktionalität momentan nur mit Hilfe der anbieterspezifischen Varianten
mozRequestFullScreen()
bzw.
webkitRequestFullScreen()
realisieren.
    Die Details der JavaScript-Funktion müssen Sie an dieser Stelle nicht unbedingt verstehen. Binden Sie die Funktion einfach wie gezeigt in einem Scriptbereich ein, und rufen Sie sie wie gezeigt mit Hilfe eines Links oder mit einem Formular-Button, also etwa in der Form

) auf. Zu Formular-Buttons siehe Abschnitt 8.2.8 .
Referenzinformationen
    Elementreferenz <
iframe>
:
    Attributreferenz
src
,
    Attributreferenz
width
,
    Attributreferenz
height
:

    Attributreferenz
sandbox
:

    Attributreferenz
seamless
,
    Attributreferenz
srcdoc

    Attributreferenz
allowfullscreen

7.5.1      Script-Zugriffe auf Ressourcen von fremden Domains
HTML5 spezifiziert für Elemente wie Grafiken, Videos oder Audio-Dateien ein weiteres neues Attribut namens crossorigin. Damit lässt sich der domainübergreifende Zugriff regeln.
    Das
crossorigin
-Attribut ist allerdings ohne programmiertechnischen Hintergrund nicht ganz einfach erklärbar. Es handelt sich um den HTML-seitigen Teil der Implementierung von CORS. CORS steht für Cross-Origin Resource Sharing (herkunftsübergreifendes Teilen von Ressourcen) und ist eine neuere Spezifikation des W3-Konsortiums. Die entsprechende Empfehlung ( recommendation ), die derzeit

Weitere Kostenlose Bücher