<portal>: Portal 元素

實驗性: 這是一個 實驗性技術
在生產環境中使用此功能之前,請仔細檢查 瀏覽器相容性表

<portal> HTML 元素允許將另一個 HTML 頁面嵌入到當前頁面中,以實現更流暢的頁面導航。

<portal><iframe> 類似。<iframe> 允許嵌入單獨的 瀏覽上下文。但是,<portal> 的嵌入內容比 <iframe> 更有限。它不能進行互動,因此不適合將小部件嵌入到文件中。相反,<portal> 充當另一個頁面的內容預覽。它可以進行導航,從而實現與嵌入內容的無縫過渡。

屬性

此元素包含 全域性屬性

referrerpolicy

設定 引用者策略,在請求 src 屬性值指定的 URL 頁面時使用。

src

要嵌入的頁面的 URL。

無障礙

<portal> 元素所顯示的預覽不是互動式的,因此不會接收輸入事件或焦點。 因此,門戶的嵌入內容不會作為 可訪問性樹 中的元素顯示。 可以像按鈕一樣導航到門戶並激活它,單擊門戶時的預設行為是啟用它。

門戶將被賦予一個預設標籤,該標籤是嵌入頁面的標題。 如果沒有標題,則將連線預覽中的可見文字以建立標籤。 可以使用 aria-label 屬性來覆蓋此標籤。

僅用於預渲染的門戶應使用隱藏的 HTML 屬性或帶有 none 值的 CSS display 屬性隱藏。

在使用門戶啟用期間的動畫時,應尊重 prefers-reduced-motion 媒體特徵

示例

基本示例

以下示例將把 https://example.com 的內容嵌入為預覽。

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

技術摘要

隱式 ARIA 角色 按鈕
DOM 介面 HTMLPortalElement

規範

規範
門戶
# the-portal-element

瀏覽器相容性

BCD 表格僅在啟用 JavaScript 的瀏覽器中載入。