js全屏指定元素全屏 requestFullscreen exitFullscreen

最新推荐文章于 2023-09-20 10:28:56 发布

brezee_shenhaha

最新推荐文章于 2023-09-20 10:28:56 发布

阅读量2.5k

点赞数 1

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

版权

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

const openFullscreen = () => {
     /* 获取(<html>)元素以全屏显示页面 */
    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()方法退出全屏模式

const exitFullscreen = () => {
     function exitFullscreen() {
        if(document.exitFullScreen) {
            document.exitFullScreen();
        //兼容Firefox
        } else if(document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        //兼容Chrome, Safari and Opera等
        } else if(document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        //兼容IE/Edge
        } else if(element.msExitFullscreen) {
            element.msExitFullscreen();
        }
    }
}

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

brezee_shenhaha

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
js全屏指定元素全屏 requestFullscreen exitFullscreen

1、全屏模式：requestFullscreen()方法用于发出异步请求实现元素全屏显示const openFullscreen = () => { /* 获取(<html>)元素以全屏显示页面 */ const full = document.getElementById('content') if (full.RequestFullScreen) { full.RequestFullScreen() //兼容Firefox...
复制链接

扫一扫