调用js接口控制画布全屏和退出全屏,

27 min read

以下是基于HTML5的方法来控制画布全屏和退出全屏。

全屏方法:

function requestFullScreen(element) {
  //判断各种浏览器,找到正确的方法
  var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
  if (requestMethod) {
    requestMethod.call(element);
  } else if (typeof window.ActiveXObject !== "undefined") { //for Internet Explorer
    var wscript = new ActiveXObject("WScript.Shell");
    if (wscript !== null) {
      wscript.SendKeys("{F11}");
    }
  }
}

退出全屏方法:

function exitFullscreen() {
  //判断各种浏览器,找到正确的方法
  var exitMethod = document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen;
  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}");
    }
  }
}

注意:全屏只能在用户事件(如点击、按键)中执行,如无法则会被浏览器拒绝。