html 全屏

实现原理，主要靠浏览器提供的API支持

首先是w3c标准的

// 全屏
element.requestFullScreen();
// 退出全屏
document.exitFullscreen();

而各家浏览器的私有支持的

// Chrome
document.webkitCancelFullScreen();
// 火狐
document.mozRequestFullScreen();

这情况嘛，当然是做兼容处理啦~

//  做个全屏的构造函数
var FullScreen = function(elem){
  this.elem = document.querySelector(elem);
}
//  全屏
FullScreen.prototype.in = function() {  
    if (this.elem.requestFullscreen) {
      this.elem.requestFullscreen();
    } else if (this.elem.webkitRequestFullscreen) {
      this.elem.webkitRequestFullscreen();
    } else if (this.elem.mozRequestFullScreen) {
      this.elem.mozRequestFullScreen();
    } else if (this.elem.msRequestFullscreen) {
      //  IE的实现没有实测过，不过据网上的资料说IE11以下可实现的
      this.elem.msRequestFullscreen();
    }
}
//  退出全屏
FullScreen.prototype.out = function() {  
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
}

当我们使用的时候，new一个就好了

var test = new FullScreen(".test");
//  全屏
test.in();
//  退出
test.out();