<portal>: Das Portal-Element
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig, bevor Sie diese produktiv verwenden.
Das <portal>-HTML-Element ermöglicht das Einbetten einer anderen HTML-Seite in die aktuelle, um eine reibungslosere Navigation zu neuen Seiten zu ermöglichen.
Ein <portal> ist ähnlich einem <iframe>. Ein <iframe> erlaubt es, einen separaten Browsenkontext einzubetten. Der eingebettete Inhalt eines <portal> ist jedoch stärker eingeschränkt als der eines <iframe>. Es kann nicht interagiert werden, und ist deshalb nicht geeignet, um Widgets in ein Dokument einzubetten. Stattdessen fungiert das <portal> als Vorschau des Inhalts einer anderen Seite. Es kann zu diesem navigiert werden, was einen nahtlosen Übergang zum eingebetteten Inhalt ermöglicht.
Attribute
Dieses Element umfasst die globalen Attribute.
referrerpolicy-
Legt die Referrer-Richtlinie fest, die beim Abrufen der Seite unter der im
src-Attribut angegebenen URL verwendet werden soll. src-
Die URL der einzubettenden Seite.
Barrierefreiheit
Die im <portal> angezeigte Vorschau ist nicht interaktiv, erhält daher keine Eingabeveranstaltungen oder Fokus. Daher werden die eingebetteten Inhalte des Portals nicht als Elemente im Barrierefreiheitsbaum angezeigt. In das Portal kann navigiert und es kann wie ein Button aktiviert werden. Das Standardverhalten beim Klicken auf das Portal ist seine Aktivierung.
Portale erhalten ein Standardlabel, welches der Titel der eingebetteten Seite ist. Wenn kein Titel vorhanden ist, wird der sichtbare Text in der Vorschau zusammengefügt, um ein Label zu erstellen. Das aria-label-Attribut kann verwendet werden, um dies zu überschreiben.
Portale, die nur für das Vorab-Rendering verwendet werden, sollten mit dem versteckten HTML-Attribut oder der CSS-display-Eigenschaft mit dem Wert none versteckt werden.
Wenn während der Portalaktivierung Animationen verwendet werden, sollte die prefers-reduced-motion- Medienfunktion berücksichtigt werden.
Beispiele
Einfaches Beispiel
Das folgende Beispiel wird die Inhalte von https://example.com als Vorschau einbetten.
<portal id="exampleportal" src="https://example.com/"></portal>
Technische Zusammenfassung
| Implizite ARIA Rolle | button |
|---|---|
| DOM-Schnittstelle | [`HTMLPortalElement`](/de/docs/Web/API/HTMLPortalElement) |
Spezifikationen
| Specification |
|---|
| Portals # the-portal-element |
Browser-Kompatibilität
BCD tables only load in the browser