js 实现浏览器全屏、退出和监控

兼容火狐、谷歌、IE11及以上浏览器

//全屏显示

launchFullscreen(element) {

  if(element.requestFullscreen) {

    element.requestFullscreen();

  } else if(element.mozRequestFullScreen) {

    element.mozRequestFullScreen();

  } else if(element.webkitRequestFullscreen) {

    element.webkitRequestFullscreen();

  } else if(element.msRequestFullscreen) {

    element.msRequestFullscreen();

  }

},

// 退出全屏

exitFullscreen () {

  if(document.exitFullscreen) {

    document.exitFullscreen();

  } else if(document.mozCancelFullScreen) {

    document.mozCancelFullScreen();

  } else if(document.webkitExitFullscreen) {

    document.webkitExitFullscreen();

  }

},

//监听全屏状态,全屏返回dom,否则返回false

watchFullScreen(){

  document.addEventListener("fullscreenchange", function () { 

          var isFull = document.fullscreenElement    ||

                  document.msFullscreenElement  ||

                  document.mozFullScreenElement ||

                  document.webkitFullscreenElement || false;

    }, false); 

    document.addEventListener("mozfullscreenchange", function () {

         var isFull = document.fullscreenElement    ||

                  document.msFullscreenElement  ||

                  document.mozFullScreenElement ||

                  document.webkitFullscreenElement || false;

    }, false); 

    document.addEventListener("webkitfullscreenchange", function () { 

           var isFull = document.fullscreenElement    ||

                  document.msFullscreenElement  ||

                  document.mozFullScreenElement ||

                  document.webkitFullscreenElement || false;

    }, false); 

    document.addEventListener("msfullscreenchange", function () { 

          var isFull = document.fullscreenElement    ||

                  document.msFullscreenElement  ||

                  document.mozFullScreenElement ||

                  document.webkitFullscreenElement || false;

    }, false);

},

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 2,062评论 0 2
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,932评论 2 17
  • 原文: https://github.com/ecomfe/spec/blob/master/javascript...
    zock阅读 3,414评论 2 36
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,120评论 1 10
  • 自性的我 如尘世间真实的自我 觉察每个当下 如实体验每个发生 允许一切 于他原本的样子 允许我 平凡的样子 我知道...
    三月品阅读 224评论 0 0