添加链接 注册    登录
link管理
链接快照平台
  • 输入网页链接，自动生成快照
  • 标签化管理网页链接
相关文章推荐
飞奔的企鹅  ·  html如何让iframe全屏显示 | ...·  昨天    · 
冷静的日记本  ·  实现iframe里面的页面全屏_iframe ...·  昨天    · 
逃跑的灭火器  ·  iframe全屏兼容（按钮在iframe里） ...·  昨天    · 
酒量小的小蝌蚪  ·  iframe嵌套其它网站页面 ...·  昨天    · 
谈吐大方的电脑桌  ·  全屏 API 标准·  昨天    · 
很拉风的鸭蛋  ·  京张高铁带动沿线冬季旅游 下一站 ...·  2 月前    · 
干练的薯片  ·  《Velocity ...·  2 月前    · 
大力的键盘  ·  案例评析丨高空抛物罪与以危险方法危害公共安全 ...·  2 月前    · 
腼腆的牛肉面  ·  汇川技术中国电子展之行获深圳市领导肯定 - ...·  3 月前    · 
帅呆的匕首  ·  Kindle没了这些国产优质电子书阅读器同样 ...·  3 月前    · 
link管理  ›  全屏 API 标准
element iframe
https://htmlspecs.com/fullscreen/
谈吐大方的电脑桌
昨天

本规范依赖于 Infra 标准。 [INFRA]

本规范中使用的大多数术语来自 CSS、DOM、HTML 和 Web IDL。 [CSS] [DOM] [HTML] [WEBIDL]

2. 模型

所有 元素 都有一个相关的 全屏标志 。除非另有说明，否则该标志为未设置。

所有 iframe 元素 都有一个相关的 iframe 全屏标志 。除非另有说明，否则该标志为未设置。

所有 文档 都有一个相关的 全屏元素 。 全屏元素 是 文档 中 顶层 中置顶的 元素 ，其 全屏标志 已设置；否则为 null。

所有 文档 都有一个相关的 待处理全屏事件列表 ， 它是一个包含 ( 字符串 , 元素 ) 元组 的 有序集合 。初始为空。

要 全屏显示 element ：

将 hideUntil 设为运行 最顶层的弹出元素祖先 的结果，给定 element ，null 和 false。

如果 hideUntil 为 null，则将 hideUntil 设为 element 的 节点文档 。

运行 隐藏所有弹出元素直到 ，给定 hideUntil ，false 和 true。

设置 element 的 全屏标志 。

立即从顶层移除 给定 element 。

  • 添加到顶层 给定 element 。

    要 取消全屏显示 element ，取消设置 element 的 全屏标志 和 iframe 全屏标志 （如果有），并 立即从顶层移除 给定 element 。

    要 取消全屏显示 document ， 取消全屏显示 所有在 document 的 顶层 中的 元素 ，其 全屏标志 已设置。

    要 完全退出全屏 给定 文档 document ，运行以下步骤：

    如果 document 的 全屏元素 为 null，则终止这些步骤。

    取消全屏显示元素 ，这些元素的 全屏标志 已设置，在 document 的 顶层 中，但不包括 document 的 全屏元素 。

    退出全屏 document 。

    每当运行 移除步骤 时，给定一个 removedNode ，运行以下步骤：

    将 document 设为 removedNode 的 节点文档 。

    将 nodes 设为 removedNode 的 包括阴影在内的包含后代 ，其 全屏标志 已设置，按 包括阴影在内的树顺序 排列。

    遍历 nodes 中的每个 node ：

    如果 node 是 document 的 全屏元素 ， 退出全屏 document 。

    否则， 取消全屏显示 node 。

    如果 document 的 顶层 包含 node ， 立即从顶层移除 给定 node 。

    其他规范可以在 顶层 中添加和移除元素，因此 node 可能不是 document 的 全屏元素 。例如， node 可能是一个打开的 对话框 元素。 partial interface Element { Promise < undefined > requestFullscreen ( optional FullscreenOptions options = {}); attribute EventHandler onfullscreenchange ; attribute EventHandler onfullscreenerror ; partial interface Document { [ LegacyLenientSetter ] readonly attribute boolean fullscreenEnabled ; [ LegacyLenientSetter , Unscopable ] readonly attribute boolean fullscreen ; // historical Promise < undefined > exitFullscreen (); attribute EventHandler onfullscreenchange ; attribute EventHandler onfullscreenerror ; partial interface mixin DocumentOrShadowRoot { [ LegacyLenientSetter ] readonly attribute Element ? fullscreenElement ;

    promise = element . requestFullscreen([ options ]) 将 element 显示为全屏，并在完成后解析 promise 。

    当提供时， options 的 navigationUI 成员指示是否希望在全屏显示时显示导航 UI。如果设置为 " show "， 则表示优先考虑导航简便性，而不是屏幕空间；如果设置为 " hide "， 则更倾向于更多的屏幕空间。用户代理始终可以优先考虑用户偏好，而不是应用程序的偏好。默认值 " auto " 表示没有应用程序偏好。

    document . fullscreenEnabled

    如果 document 具有显示 元素 全屏的能力，并且 支持全屏 ，则返回 true，否则返回 false。

    promise = document . exitFullscreen()

    停止 document 的 全屏元素 的全屏显示，并在完成后解析 promise 。

    document . fullscreenElement

    返回 document 的 全屏元素 。

    shadowroot . fullscreenElement

    返回 shadowroot 的 全屏元素 。

    元素 element 的 全屏元素就绪检查 返回 true 如果以下所有条件都为 true，否则返回 false：

    element 是 已连接的 。

    element 的 节点文档 被 允许使用 " 全屏 "

    element 的 命名空间 不是 HTML 命名空间 ，或 element 的 弹出框可见性状态 为 隐藏 。

    requestFullscreen( options ) 方法的步骤如下：

    将 pendingDoc 设为 this 的 节点文档 。

    将 promise 设为一个新的 promise。

    如果 pendingDoc 不是 完全活动的 ，则使用 TypeError 异常拒绝 promise ，并返回 promise 。

    将 error 设为 false。

    如果以下任一条件为 false，则将 error 设置为 true：

    this 的 命名空间 是 HTML 命名空间 ，或者 this 是一个 SVG svg 或 MathML math 元素。 [SVG] [MATHML]

    this 不是

    全屏元素就绪检查 对于 this 返回 true。

    支持全屏 。

    this 的 相关全局对象 具有 瞬时激活 ，或者该算法是 由用户生成的方向更改触发 。

    如果 error 为 false，则 消耗用户激活 ，给定 pendingDoc 的 相关全局对象 。

    返回 promise ，并运行剩余步骤 并行 。

    如果 error 为 false，则调整 pendingDoc 的 节点可导航 的 顶级可遍历对象 的 活动文档 的视口尺寸，可选择考虑 options [" navigationUI "]：

    一个 document 被称为 简单全屏文档 ，如果在其 顶层 中只有一个 元素 具有其 全屏标志 设置。

    一个 document 中有两个 元素 在其 顶层 中，可以被称为一个 简单全屏文档 。例如，除了 全屏元素 外，还可以有一个打开的

    要 收集要退出全屏的文档 ，给定 doc ，请运行以下步骤：

    将 docs 设为一个 有序集合 ，由 doc 组成。

    当 条件为 true 时：

    将 lastDoc 设为 docs 的最后一个 文档 。

    断言： lastDoc 的 全屏元素 不为 null。

    如果 lastDoc 不是 简单全屏文档 ，则 中断 。

    将 container 设为 lastDoc 的 节点可导航 的 容器 。

    如果 container 为 null，则 中断 。

    如果 container 的 iframe 全屏标志 被设置， 中断 。

    追加 container 的 节点文档 到 docs 。

    返回 docs 。

    这是 全屏元素 将被 退出全屏 的一组文档，但 docs 中的最后一个文档可能有多个 元素 在其 顶层 中设置了 全屏标志 ，这种情况下该文档仍将保持全屏状态。 对象上也没有对应的 事件处理程序内容属性 。

    4. 用户界面

    鼓励用户代理在实现原生媒体全屏控制时使用 requestFullscreen() 和 exitFullscreen() 。

    如果最终用户指示用户代理结束通过 requestFullscreen() 启动的全屏会话， 完全退出全屏 ，给定 顶级可遍历对象 的 活动文档 。

    用户代理可以在没有最终用户指示或调用 exitFullscreen() 的情况下随时结束任何全屏会话，只要用户代理认为有必要。

    5. 渲染

    本节的解释应与HTML的渲染部分等效。 [HTML]

    5.1. :fullscreen 伪类

    :fullscreen 伪类必须匹配满足以下任一条件的 元素 element ：

    element 的 全屏标志 已设置。

    element 是 shadow宿主 ，并且 重新定位 其 节点文档 的 全屏元素 的结果是 element 。

    这使其不同于 fullscreenElement API，该API返回最上层的 全屏元素 。 用户代理级别样式表默认值 

    @namespace "http://www.w3.org/1999/xhtml";
*|*:not(:root):fullscreen {
  position:fixed !important;
  inset:0 !important;
  margin:0 !important;
  box-sizing:border-box !important;
  min-width:0 !important;
  max-width:none !important;
  min-height:0 !important;
  max-height:none !important;
  width:100% !important;
  height:100% !important;
  transform:none !important;
  /* intentionally not !important */
  object-fit:contain;
iframe:fullscreen {
  border:none !important;
  padding:0 !important;
*|*:not(:root):fullscreen::backdrop {
  background:black;
            权限策略集成
        
    本规范定义了一个由字符串"fullscreen"标识的策略控制的功能。其默认允许列表是'self'。
            
    文档的权限策略决定了该文档中的任何内容是否被允许进入全屏模式。如果在任何文档中禁用，则该文档中的任何内容都不会
                被允许使用全屏。
                allowfullscreen
                属性会影响嵌套在该
                iframe
                中的任何文档的
                容器策略。除非通过
                allow
                属性覆盖，在
                allowfullscreen
                <iframe
allow="fullscreen *">，如Permissions
                        Policy § 6.3.1 allowfullscreen中所述。
            安全性和隐私考量
        
    用户代理应确保，例如通过覆盖层，使最终用户意识到某些内容正在全屏显示。用户代理应提供一种始终有效的退出全屏的方式，并向用户宣传这一点。这是为了防止网站通过在全屏状态下重新创建用户代理甚至操作系统环境来欺骗最终用户。另请参见requestFullscreen()的定义。
        
    要使子可遍历对象中的内容能够全屏显示，必须通过权限策略明确允许，方式包括通过HTMLallowfullscreen属性，或通过HTMLiframe元素中的allow属性，或通过与嵌套文档一起传递的`Permissions-Policy` HTTP头部声明。
        
    这可以防止例如第三方内容未经明确许可进入全屏模式。
    
        
        
    本规范之前托管了::backdrop选择器和文档的顶层概念的定义。
    
        
    特别感谢 Robert O’Callahan 设计了最初的模型，并且非常出色。
    
            Andy Earnshaw,
            Changwan Hong,
            Chris Pearce,
            Darin Fisher,
            Dave Tapuska, fantasai,
            Giuseppe Pascale,
            Glenn Maynard,
            Ian Clelland,
            Ian Hickson,
            Ignacio Solla,
            João Eiras,
            Josh Soref,
            Kagami Sascha Rosylight,
            Matt Falkenhagen,
            Mihai Balan,
            Mounir Lamouri,
            Øyvind Stenhaug,
            Pat Ladd,
            Rafał Chłodnicki,
            Riff Jiang,
            Rune Lillesveen,
            Sigbjørn Vik,
            Simon Pieters,
            Tab Atkins-Bittner,
            Takayoshi Kochi,
            Theresa O’Connor,
            triple-underscore,
            Vincent Scheib, 和
            Xidorn Quan
            也非常出色。
        
    本标准由 Philip Jägenstedt (Google,
            [email protected]) 编辑。最初由 Anne van Kesteren (Apple, [email protected]) 撰写。Tantek
                Çelik (Mozilla, [email protected]) 解决了法律问题。
        
    版权 © WHATWG (Apple, Google, Mozilla, Microsoft)。本作品以 知识共享署名 4.0 国际许可协议 授权。若将其部分内容纳入源代码，则源代码中的这些部分将根据 BSD 3-Clause 许可证 授权。
    
        
    这是现行标准。对专利审查版本感兴趣的人士应查看现行标准审查草案。
    
    
    本规范定义的术语
    
        
  • "auto", 见 § 3
        
  • auto, 见 § 3
        
  • collect documents to unfullscreen, 见 § 3
        
  • exit fullscreen, 见 § 3
        
  • exitFullscreen(), 见 § 3
        
  • :fullscreen, 见 § 5.1
        
  • fullscreen, 见 § 3
        
  • fullscreen an element, 见 § 2
        
  • fullscreenchange, 见 § 3
        
  • fullscreen element, 见 § 2
        
  • fullscreenElement, 见 § 3
        
  • fullscreen element ready check, 见 § 3
        
  • fullscreenEnabled, 见 § 3
        
  • fullscreenerror, 见 § 3
        
  • fullscreen-feature, 见 § 6
        
  • fullscreen flag, 见 § 2
        
  • Fullscreen is supported, 见 § 2
        
  • FullscreenNavigationUI, 见 § 3
        
  • FullscreenOptions, 见 § 3
        
  • fully exit fullscreen, 见 § 2
        
  • "hide", 见 § 3
        
  • hide, 见 § 3
        
  • iframe fullscreen flag, 见 § 2
        
  • list of pending fullscreen events, 见 § 2
        
  • navigationUI, 见 § 3
        
  • onfullscreenchange, 见 § 3
        
  • onfullscreenerror, 见 § 3
        
  • requestFullscreen(), 见 § 3
        
  • requestFullscreen(options), 见 § 3
        
  • run the fullscreen steps, 见 § 2
        
  • "show", 见 § 3
        
  • show, 见 § 3
        
  • simple fullscreen document, 见 § 3
        
  • unfullscreen a document, 见 § 2
        
  • unfullscreen an element, 见 § 2
    
    引用定义的术语
    
            [] 定义了以下术语:
                
  • 由用户生成的方向改变触发
            [CSS-POSITION-4] 定义了以下术语:
                
  • ::backdrop
                
  • 添加到顶层
                
  • 立即从顶层移除
            [DOM] 定义了以下术语:
                
  • Document
                
  • DocumentOrShadowRoot
                
  • Element
                
  • ShadowRoot
                
  • bubbles
                
  • composed
                
  • connected
                
  • document
                
  • element
                
  • shadow host
                
  • shadow root
                
  • 包含shadow的所有子节点
                
  • 包含shadow的树形结构顺序
            [HTML] 定义了以下术语:
                
  • 事件处理程序
                
  • Window
                
  • 消耗用户激活
                
  • 事件处理程序
                
  • 事件处理程序内容属性
                
  • 事件处理程序事件类型
                
  • 事件处理程序IDL属性
                
  • 隐藏所有弹出框直到
                
  • iframe
                
  • 可导航元素
                
  • 节点可导航元素
                
  • 弹出框可见状态
                
  • 相关的全局对象
                
  • 顶级遍历 (针对可导航元素)
                
  • 最顶层弹出框祖先
                
  • 卸载文档清理步骤
            [INFRA] 定义了以下术语:
                
  • HTML命名空间
                
  • 当...时
            [PERMISSIONS-POLICY-1] 定义了以下术语:
                
  • 默认允许列表
                
  • 策略控制的特性
            [SCREEN-ORIENTATION] 定义了以下术语:
                
  • 完全解锁屏幕方向步骤
            [WEBIDL] 定义了以下术语:
                
  • LegacyLenientSetter
                
  • Promise
                
  • TypeError
                
  • Unscopable
                
  • boolean
                
  • undefined
    
    规范性引用
    
        
    [CSS]
        
    Bert Bos; 等. 层叠样式表第 2 级修订 1 (CSS 2.1) 规范. URL: https://drafts.csswg.org/css2/
        
    [CSS-POSITION-4]
        
    CSS 定位布局模块第 4 级.
            编辑草案. URL: https://drafts.csswg.org/css-position-4/
        
    [DOM]
        
    Anne van Kesteren. DOM 标准. 现行标准.
            URL: https://dom.spec.whatwg.org/
        
    [HTML]
        
    Anne van Kesteren; 等. HTML 标准.
            现行标准. URL: https://html.spec.whatwg.org/multipage/
        
    [INFRA]
        
    Anne van Kesteren; Domenic Denicola. Infra
                    标准. 现行标准. URL: https://infra.spec.whatwg.org/
        
    [MATHML]
        
    Patrick D F Ion; Robert R Miner. 数学标记语言 (MathML™) 1.01
                    规范. 2023年3月7日. REC. URL: https://www.w3.org/TR/REC-MathML/
        
    [PERMISSIONS-POLICY-1]
        
    Ian Clelland. 权限策略. URL: https://w3c.github.io/webappsec-permissions-policy/
        
    [SCREEN-ORIENTATION]
        
    Marcos Caceres. 屏幕方向.
            URL: https://w3c.github.io/screen-orientation/
        
    [SVG]
        
    Erik Dahlström; 等. 可缩放矢量图形 (SVG) 1.1（第二版）.
            2011年8月16日. REC. URL: https://www.w3.org/TR/SVG11/
        
    [WEBIDL]
        
    Edgar Chen; Timothy Gu. Web IDL 标准. 现行标准. URL: https://webidl.spec.whatwg.org/
    
    IDL 索引
    
    
    enum FullscreenNavigationUI {
  "auto",
  "show",
  "hide"
dictionary FullscreenOptions {
  FullscreenNavigationUI navigationUI = "auto";
partial interface Element {
  Promise<undefined> requestFullscreen(optional FullscreenOptions options = {});
  attribute EventHandler onfullscreenchange;
  attribute EventHandler onfullscreenerror;
partial interface Document {
  [LegacyLenientSetter] readonly attribute boolean fullscreenEnabled;
  [LegacyLenientSetter, Unscopable] readonly attribute boolean fullscreen; // historical
  Promise<undefined> exitFullscreen();
  attribute EventHandler onfullscreenchange;
  attribute EventHandler onfullscreenerror;
partial interface mixin DocumentOrShadowRoot {
  [LegacyLenientSetter] readonly attribute Element? fullscreenElement;
        ✔MDN
            
    Document/exitFullscreen
            
    In all current engines.
    
                Firefox64+Safari16.4+Chrome71+
                Opera58+Edge79+
                Edge (Legacy)NoneIENone
                Firefox for Android?iOS SafariNoneChrome for Android?Android WebView71+Samsung Internet?Opera Mobile50+
    •  
    推荐文章
    飞奔的企鹅  ·  html如何让iframe全屏显示 | PingCode智库
    昨天
    冷静的日记本  ·  实现iframe里面的页面全屏_iframe 全屏-CSDN博客
    昨天
    逃跑的灭火器  ·  iframe全屏兼容（按钮在iframe里） - 小Ling的博客 - 博客园
    昨天
    酒量小的小蝌蚪  ·  iframe嵌套其它网站页面 全屏设置_iframe allowfullscreen-CSDN博客
    昨天
    谈吐大方的电脑桌  ·  全屏 API 标准
    昨天
    很拉风的鸭蛋  ·  京张高铁带动沿线冬季旅游 下一站 滑雪场里过大年_信息提示_首都之窗_北京市人民政府门户网站
    2 月前
    干练的薯片  ·  《Velocity java开发指南》中文版 – 黯然奋发
    2 月前
    大力的键盘  ·  案例评析丨高空抛物罪与以危险方法危害公共安全罪的界限——杨某以危险方法危害公共安全罪-柳州市中级人民法院
    2 月前
    腼腆的牛肉面  ·  汇川技术中国电子展之行获深圳市领导肯定 - 无锡市亿东电子有限公司
    3 月前
    帅呆的匕首  ·  Kindle没了这些国产优质电子书阅读器同样值得选择_BB贝博-贝博app体育下载官网-BB体育艾弗森代言
    3 月前
    Link管理   ·   51好读   ·   Sov5搜索   ·   小百科
    link管理 - 链接快照平台