2018-10-19 全屏实现方法

JS控制浏览器全屏,通过点击按钮实现

JS 全屏方法

//获取需要全屏的元素
const elem = document.querySelector('元素');
if(elem){
  //判断浏览器类型
  if (elem.requestFullscreen) {
        elem.requestFullscreen();
  } else if (elem.webkitRequestFullScreen) {
        elem.webkitRequestFullScreen();
  }else if (elem. msRequestFullscreen) {
        elem. msRequestFullscreen();
  }else if(elem. mozRequestFullScreen){
        elem. mozRequestFullscreen();
  }

JS退出全屏的方法(通过点击按钮退出全屏)

//获取全屏元素
 const fullscreenElement: any =
         document.fullscreenElement ||
         document.webkitFullscreenElement ||
         document.mozFullscreenElement ||
         document.msFullscreenElement ;
if(fullscreenElement){
  if (document.exitFullscreen) {
     document.exitFullscreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.mozExitFullscreen) {
    document.mozExitFullscreen();
  }else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}

JS通过按esc 退出全屏的方法(对用户按esc退出做处理),精华在fullscreenchange方法

function exitHandler() { 
  const fullscreenElement: any =
      document.fullscreenElement ||
      document.webkitFullscreenElement ||
      document.mozFullscreenElement ||
      document.msFullscreenElement ||;
  const hideFunc = function() {
    //按自己需求做处理
    }
    if (headItem) {headItem.style.display = 'block'; }
    sideElem.style.display = 'block';
    contentElem.style.marginLeft = '';
  }; 
  if (fullscreenElement === null) { 
    hideFunc(); 
  }
  } 
document.addEventListener('webkitfullscreenchange', exitHandler, false); 
document.addEventListener('mozfullscreenchange', exitHandler, false);
document.addEventListener('fullscreenchange', exitHandler, false);
document.addEventListener('MSFullscreenChange', exitHandler, false);

扩展阅读:

https://www.aliyun.com/jiaocheng/981181.html
https://stackoverflow.com/questions/10706070/how-to-detect-when-a-page-exits-fullscreen
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AGI阅读 16,019评论 3 119
  • 赶脚中国吃货啥都吃不是一天练成的。来中原混的五胡才是吃货,喜欢吃人,特别是女人,尤其是 羯胡,慕容鲜卑——五胡当中...
    好逗的懦夫阅读 646评论 0 0
  • 2017年12月18日我加入了长投的基金训练营小黄人班,开始了为期14天的基金知识系统学习。今天终于打算写个总结以...
    海边的拾贝人阅读 529评论 4 2
  • 每天都在提醒自己,停止抱怨,停止抗拒,停止指责,停止一切负能量,责任回归己身,接受现状,放任别人做他自己,我才能活...
    连娟a阅读 169评论 0 0
  • 1、定义 客户端不应该依赖它不需要的接口;一个类对另一个类的依赖应该建立在最小的接口上。 2、实现 (1)定义脸蛋...
    Jimmy5Zhang阅读 517评论 0 1