<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 的瀏覽器中載入。