<portal>:门户元素

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

<portal> HTML 元素允许将另一个 HTML 页面嵌入到当前页面中，以便更顺畅地导航到新页面。

¥The <portal> HTML element enables the embedding of another HTML page into the current one for the purposes of allowing smoother navigation into new pages.

<portal> 与 <iframe> 类似。<iframe> 允许嵌入单独的 browsing context。然而，<portal> 的嵌入内容比 <iframe> 的嵌入内容更有限。它无法与之交互，因此不适合将小部件嵌入到文档中。相反，<portal> 充当另一个页面内容的预览。可以对其进行导航，从而允许无缝过渡到嵌入内容。

¥A <portal> is similar to an <iframe>. An <iframe> allows a separate browsing context to be embedded. However, the embedded content of a <portal> is more limited than that of an <iframe>. It cannot be interacted with, and therefore is not suitable for embedding widgets into a document. Instead, the <portal> acts as a preview of the content of another page. It can be navigated into therefore allowing for seamless transition to the embedded content.

属性

¥Attributes

该元素包括全局属性。

¥This element includes the global attributes.

referrerpolicy: 设置在以 src 属性值给出的 URL 请求页面时使用的推荐人政策。
src: 要嵌入的页面的 URL。

示例

¥Examples

基本示例

¥Basic example

以下示例将嵌入 https://example.com 的内容作为预览。

¥The following example will embed the contents of https://example.com as a preview.

html

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

无障碍问题

¥Accessibility concerns

<portal> 显示的预览不是交互式的，因此不会接收输入事件或焦点。因此，门户的嵌入内容不会作为 accessibility tree 中的元素公开。可以像按钮一样导航到并激活门户，单击门户时的默认行为是激活它。

¥The preview displayed by a <portal> is not interactive, therefore does not receive input events or focus. Therefore the embedded contents of the portal are not exposed as elements in the accessibility tree. The portal can be navigated to and activated like a button, the default behavior when clicking on the portal is to activate it.

门户有一个默认标签，即嵌入页面的标题。如果不存在标题，则预览中的可见文本将连接起来以创建标签。aria-label 属性可用于覆盖它。

¥Portals are given a default label which is the title of the embedded page. If no title is present the visible text in the preview is concatenated to create a label. The aria-label attribute can be used to override this.

仅用于预渲染的门户应使用隐藏 HTML 属性或值为 none 的 CSS display 属性来隐藏。

¥Portals used for prerendering only should be hidden with the hidden HTML attribute or the CSS display property with a value of none.

在门户激活期间使用动画时，应遵守 prefers-reduced-motion 媒体专题。

¥When using animations during portal activation the prefers-reduced-motion media feature should be respected.

技术总结

¥Technical summary

隐式 ARIA 角色	button
DOM 接口	`HTMLPortalElement`

规范

Specification
Portals # the-portal-element

¥Specifications

浏览器兼容性

BCD tables only load in the browser

¥Browser compatibility