如何实现全屏?

全屏

Element.requestFullscreen()
(1)该方法发出异步请求,使元素以全屏模式显示。
(2)请求浏览器(user agent)将特定元素(甚至延伸到它的后代元素)置为全屏模式,隐去屏幕上的浏览器所有 UI 元素,以及其它应用。返回一个 Promise,并会在全屏模式被激活的时候变成 resolved 状态。
(3)不能保证元素会进入全屏模式。如果授予进入全屏模式的权限,返回的Promise将被解析并且该元素将收到一个fullscreenchange事件以告知它现在处于全屏模式。如果权限被拒绝,promise 将被拒绝,元素将接收一个fullscreenerror事件。如果该元素已从原始文档中分离出来,则该文档将接收这些事件。
(4)支持传参 FullscreenOptions。

navigationUI 控制元素处于全屏模式时是否显示导航 UI。默认值是"auto",表示浏览器应该决定做什么。
hide 浏览器的导航界面将被隐藏,屏幕的整个尺寸将分配给元素的显示。
show 浏览器将呈现页面导航控件和可能的其他用户界面;元素的尺寸(以及屏幕的感知尺寸)将被限制以便为该用户界面留出空间。
auto 浏览器将选择应用上述哪些设置。这是默认值。



退出全屏

Document.exitFullscreen()
(1)用于请求从全屏模式切换到窗口模式,会返回一个 Promise,会在全屏模式完全关闭的时候被置为 resolved 状态。
(2)用户通过按 ESC 键(或 F11)即可退出全屏模式。


事件

fullscreenchange 可用来检测全屏模式何时打开和关闭。当全屏或退出全屏时发送消息给(监听的)的 Document 或 Element 。

fullscreenerror 在全屏模式和窗口模式之间切换过程中何时发生错误。当全屏或退出全屏是发生了错误时,将错误消息发送给(监听的)的 Document 或 Element 。



浏览器兼容

全屏

  • requestFullscreen
  • mozRequestFullScreen
  • webkitRequestFullscreen
  • msRequestFullscreen

退出全屏

  • exitFullscreen
  • mozCancelFullScreen
  • webkitExitFullscreen
  • msExitFullscreen

猜你喜欢

转载自blog.csdn.net/Kate_sicheng/article/details/128199784
今日推荐