Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

<meta name="responsive-embedded-sizing">

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Der Wert responsive-embedded-sizing für das name-Attribut eines <meta>-Elements ermöglicht einem in einem <iframe> eingebetteten Dokument, seine Größeninformationen mit dem übergeordneten Dokument zu teilen. Der Rahmen kann dann relativ zur Layout-Größe des enthaltenen Dokuments durch die CSS-Eigenschaft frame-sizing dimensioniert werden.

Beschreibung

Aus Sicherheits- und Datenschutzgründen offenbaren <iframe>-Elemente standardmäßig keine Informationen über die Größe des eingebetteten Inhalts an das übergeordnete Dokument.

Um eine responsive Größenanpassung von <iframe>-Elementen entsprechend ihrem Inhalt zu ermöglichen, kann der Tag <meta name="responsive-embedded-sizing"> in ein eingebettetes Dokument eingeschlossen werden, damit es seine Größeninformation mit dem übergeordneten Dokument teilt.

Die CSS-Eigenschaft frame-sizing kann dann auf dem <iframe> gesetzt werden, um die gleiche horizontale oder vertikale Größe wie die tatsächliche Inhaltsgröße des eingebetteten Dokuments (in der Spezifikation als interne Layout-intrinsische Größe bezeichnet, in unserer Dokumentation aber auf "Layout-Größe" verkürzt) zu übernehmen. Dies ermöglicht es, dass <iframe>-Inhalte nahtlos in das einbettende Element passen und unnötige Scrollbalken vermieden werden.

Um das <iframe> dynamisch anzupassen, wenn sich die Layout-Größe des eingebetteten Dokuments ändert, können Sie die Methode Window.requestResize() aus dem eingebetteten Dokument aufrufen, um eine aktualisierte Größe zu melden.

Beispiele

Siehe die Seiten zu frame-sizing und Window.requestResize() für vollständige Beispiele.

Spezifikationen

Spezifikation
CSS Box Sizing Module Level 4
# iframe-frame-sizing:~:text=If%20a-,%3Cmeta%20name%3Dresponsive%2Dembedded%2Dsizing%3E

Browser-Kompatibilität

Siehe auch