<portal>: ポータル要素

HTML のポータル要素 (<portal>) は、他の HTML ページを現在のページに埋め込み、新しいページへの移動がスムーズにできるようにします。

<portal><iframe> に似ています。 <iframe> では独立した閲覧コンテキストを作成して埋め込みます。しかし、 <portal> で埋め込まれるコンテンツは <iframe> の場合よりも制限されます。これを操作することはできませんので、文書にウィジェットを埋め込むには適していません。その代わり、 <portal> は他のページのコンテンツのプレビューとして動作します。そのため、埋め込まれたコンテンツへのシームレスな遷移により移動を行うことができます。

暗黙の ARIA ロール button
DOM インターフェイス HTMLPortalElement

属性

この要素にはグローバル属性があります。

referrerpolicy
リファラーポリシーを設定します。これは、 src 属性の値で指定された URL のページをリクエストする際に使用されます。
src
埋め込むページの URL です。

基本的な例

以下の例は https://example.com のコンテンツをプレビューとして埋め込みます。

<portal id="exampleportal" src="https://example.com/"></portal>

アクセシビリティの考慮

<portal>が表示するプレビューは、操作が可能ではないため、入力イベントやフォーカスを受けません。そのため、ポータルの埋め込みコンテンツは、アクセシビリティツリーの要素として公開されません。ポータルは、ボタンのように移動してアクティブにすることができ、クリックしたときの既定の動作は、ポータルを有効にすることです。

ポータルには、埋め込まれたページのタイトルが既定のラベルが与えられます。タイトルがない場合は、プレビューで表示されるテキストが結合されてラベルが作成されます。 aria-label 属性を使用すると、これを上書きすることができます。

事前レンダリングのためにポータルを使用する場合は、 HTML の hidden 属性または CSS の display プロパティの値を none にして非表示にしてください。

ポータルがアクティブ化している間にアニメーションを使用する場合は、 prefers-reduced-motion メディア特性を尊重してください。

仕様書

仕様書 状態 備考
Portals 編集者草案 初回定義

ブラウザーの互換性

No compatibility data found for html.elements.portal.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.