通过javascript控制页面全屏显示

最新推荐文章于 2024-07-19 15:49:07 发布

ღ故里᭄ꦿ࿐

最新推荐文章于 2024-07-19 15:49:07 发布

阅读量354

点赞数 2

CC 4.0 BY-SA版权

分类专栏：三大基础功能实现文章标签： javascript 全屏显示

本文链接：https://blog.youkuaiyun.com/Hunt_bo/article/details/96558277

三大基础同时被 2 个专栏收录

26 篇文章

订阅专栏

功能实现

21 篇文章

订阅专栏

由于项目的需要，有时候需要对页面进行全屏显示，说到底就是就是我们常用的F11，H5提供了相应的API，目前google chrome 15 +, safri5.1+,firfox10+,IE1能够很好的支持该属性，低版本的IE可以通过ActiveX插件实现。

简单粗暴，直接上代码

定义全屏显示函数

function fullScreen() {

  var el = document.documentElement;

  var rfs = el.requestFullScreen || el.webkitRequestFullScreen || 

      el.mozRequestFullScreen || el.msRequestFullScreen;

  if(typeof rfs != "undefined" && rfs) {

    rfs.call(el);

  } else if(typeof window.ActiveXObject != "undefined") {

    //for IE，这里其实就是模拟了按下键盘的F11，使浏览器全屏

    var wscript = new ActiveXObject("WScript.Shell");

    if(wscript != null) {

        wscript.SendKeys("{F11}");

    }

  }
}

定义退出全屏的函数

function exitFull() {
  // 判断各种浏览器，找到正确的方法
  var exitMethod = document.exitFullscreen || document.mozCancelFullScreen || document.webkitExitFullscreen || document.webkitExitFullscreen; 
  if (exitMethod) {
    exitMethod.call(document);
  }
  else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
    var wscript = new ActiveXObject("WScript.Shell");
    if (wscript !== null) {
      wscript.SendKeys("{F11}");
    }
  }
}

下面的就不多说了，就剩下各种场景的调用了。