H5,谷歌dom 全屏和退出全屏

最新推荐文章于 2023-03-22 11:15:20 发布

A small

最新推荐文章于 2023-03-22 11:15:20 发布

阅读量461

点赞数 1

文章标签： dom js html5 javascript

本文链接：https://blog.csdn.net/zjmxbd/article/details/119038394

版权

1.进入和退出全屏

  // element          要全屏的dom
  //isFullscreen     进入全屏退出全屏
setFullscreen({element,isFullscreen}){
  let _element = document.getElementById(element)
  if(_element && isFullscreen){  //进入全屏
      if(_element.requestFullscreen){ //W3C
        _element.requestFullscreen();
      }else if(_element.mozRequestFullScreen){//FireFox
        _element.mozRequestFullScreen();
      }else if(_element.webkitRequestFullscreen){ //Chrome等
        _element.webkitRequestFullscreen();
      }else if(_element.msRequestFullscreen){ //IE11
        _element.msRequestFullscreen();
      },
  }else if(_element && !isFullscreen){//退出全屏
    if(document.exitFullscreen) {
        document.exitFullscreen();
      } else if(document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if(document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
  }
},

2.safari 浏览器全屏执行以上代码会出现dom不能完全全屏

 &:-webkit-full-screen{
   width: 100% !important;
   height: 100% !important;
 }

3.安卓H5微信浏览器全屏之后软键盘无法弹出

安卓H5微信浏览器调用以上方法退出全屏之后，会导致input 输入框聚焦之后无法弹起软键盘。
解决方法，加一个window.confirm() 或者是alert(),(不友好，在多次进行全屏，退出全屏之后，alert 之后，安卓会把取消按钮变为关闭网页，这个暂时不能去掉)；除了这个方法暂时没有解决办法
附：https://blog.csdn.net/weixin_44249467/article/details/88565343