| title | slug | l10n | ||
|---|---|---|---|---|
<portal>: ポータル要素 |
Web/HTML/Element/portal |
|
{{HTMLSidebar}}{{SeeCompatTable}}
<portal> は HTML の要素で、他の HTML ページを現在のページに埋め込み、新しいページへの移動がスムーズにできるようにします。
<portal> は <iframe> に似ています。 <iframe> では独立した{{Glossary("browsing context", "閲覧コンテキスト")}}を作成して埋め込みます。しかし、 <portal> で埋め込まれるコンテンツは <iframe> の場合よりも制限されます。これを操作することはできませんので、文書にウィジェットを埋め込むには適していません。その代わり、 <portal> は他のページのコンテンツのプレビューとして動作します。そのため、埋め込まれたコンテンツへのシームレスな遷移により移動を行うことができます。
この要素にはグローバル属性があります。
referrerpolicy- : リファラーポリシーを設定します。これは、
src属性の値で指定された URL のページをリクエストする際に使用されます。
- : リファラーポリシーを設定します。これは、
src- : 埋め込むページの URL です。
以下の例は https://example.com のコンテンツをプレビューとして埋め込みます。
<portal id="exampleportal" src="https://example.com/"></portal><portal> が表示するプレビューは、操作が可能ではないため、入力イベントやフォーカスを受けません。そのため、ポータルの埋め込みコンテンツは、{{Glossary("accessibility tree", "アクセシビリティツリー")}}の要素として公開されません。ポータルは、ボタンのように移動してアクティブにすることができ、クリックしたときの既定の動作は、ポータルを有効にすることです。
ポータルには、埋め込まれたページのタイトルが既定のラベルが与えられます。タイトルがない場合は、プレビューで表示されるテキストが結合されてラベルが作成されます。aria-label 属性を使用すると、これを上書きすることができます。
事前レンダリングのためにポータルを使用する場合は、 HTML の hidden 属性または CSS の {{cssxref("display")}} プロパティの値を none にして非表示にしてください。
ポータルがアクティブ化している間にアニメーションを使用する場合は、 {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} メディア特性を尊重してください。
| 暗黙の ARIA ロール | button |
|---|---|
| DOM インターフェイス | {{domxref("HTMLPortalElement")}} |
{{Specifications}}
{{Compat}}