js全屏指定元素全屏 requestFullscreen exitFullscreen

您所在的位置：网站首页 › 理想之城剧中音乐叫什么 › js全屏指定元素全屏 requestFullscreen exitFullscreen

js全屏指定元素全屏 requestFullscreen exitFullscreen

2023-06-14 02:15| 来源: 网络整理| 查看: 265

1、全屏模式：requestFullscreen()方法用于发出异步请求实现元素全屏显示

const openFullscreen = () => { /* 获取()元素以全屏显示页面 */ const full = document.getElementById('content') if (full.RequestFullScreen) { full.RequestFullScreen() //兼容Firefox } else if (full.mozRequestFullScreen) { full.mozRequestFullScreen() //兼容Chrome, Safari and Opera等 } else if (full.webkitRequestFullScreen) { full.webkitRequestFullScreen() //兼容IE/Edge } else if (full.msRequestFullscreen) { full.msRequestFullscreen() } }

2、取消全屏模式：exitFullscreen()方法退出全屏模式

3、返回当前页面以全屏显示的element节点，如果没有使用全屏模式,则返回null

const getFullscreenElement = () => { return ( document.fullscreenElement || document.mozFullScreenElement || document.msFullScreenElement || document.webkitFullscreenElement||null ); }

4、判断当前是否全屏，fullscreen已废弃，可以通过检查document.fullscreenelement是否为null来确定文档上是否启用全屏模式

const isFullScreen = () => { return !! ( document.fullscreen || document.mozFullScreen || document.webkitIsFullScreen || document.webkitFullScreen || document.msFullScreen ); }

5、返回一个布尔值，表明浏览器是否支持全屏模式。全屏模式只在那些不包含窗口化的插件的页面中可用.对于一个元素中的页面,则它必需拥有mozallowfullscreen属性

const isFullscreenEnabled = () => { return ( document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled ); }

requestFullscreen()方法只能在用户交互或者设备方向改变的时候调用，否则将会失败，比如：在onload事件中不能触发路由页面跳转需先退出全屏模式进入全屏的元素，将脱离其父元素，所以可能导致之前某些css的失效，可以使用 :full-screen伪类解决为元素添加全屏时的样式（使用时为了兼容注意添加-webkit、-moz或-ms前缀）一个元素A全屏后，其子元素要再全屏，需先让元素A退出全屏

原文链接：https://blog.csdn.net/xiaoxia188/article/details/116996656

【本文地址】

js全屏指定元素全屏 requestFullscreen exitFullscreen

js全屏指定元素全屏 requestFullscreen exitFullscreen

今日新闻

推荐新闻