让任意元素全屏

1、JavaScript Fullscreen API：全屏操作

全屏API可以控制浏览器的全屏显示，让一个Element节点（以及子节点）占满用户的整个屏幕。目前各大浏览器的最新版本都支持这个API（包括IE11），但是使用的时候需要加上浏览器前缀。

1. Element节点的requestFullscreen方法，可以使得这个节点全屏。

var elemet = document.getElementById("videoElement");
launchFullscreen(elemet);

function launchFullscreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();
  } else if(element.mozRequestFullScreen) {
  //不同浏览器之间需要添加前缀
    element.mozRequestFullScreen();
  } else if(element.msRequestFullscreen){
    element.msRequestFullscreen();
  } else if(element.webkitRequestFullscreen) {
    element.webkitRequestFullScreen();
  }
}

放大一个节点时，Firefox和Chrome在行为上略有不同。Firefox自动为该节点增加一条CSS规则，将该元素放大至全屏状态，width: 100%; height: 100%，而Chrome则是将该节点放在屏幕的中央，保持原来大小，其他部分变黑。为了让Chrome的行为与Firefox保持一致，可以自定义一条CSS规则。

:-webkit-full-screen #myvideo {
  width: 100%;
  height: 100%;
}

2. document对象的exitFullscreen方法用于取消全屏。该方法也带有浏览器前缀。

function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
}

exitFullscreen();

在没有手动添加这个方法前，用户手动按下ESC键或F11键，也可以退出全屏键。此外，加载新的页面，或者切换tab，或者从浏览器转向其他应用（按下Alt-Tab），也会导致退出全屏状态。

3. document.fullscreenElement
   fullscreenElement属性返回正处于全屏状态的Element节点，如果当前没有节点处于全屏状态，则返回null。
4. document.fullscreenEnabled
   fullscreenEnabled属性返回一个布尔值，表示当前文档是否可以切换到全屏状态。

var fullscreenEnabled =
  document.fullscreenEnabled ||
  document.mozFullScreenEnabled ||
  document.webkitFullscreenEnabled ||
  document.msFullscreenEnabled;

if (fullscreenEnabled) {
  videoElement.requestFullScreen();
} else {
  console.log('浏览器当前不能全屏');
}

5. 全屏事件

• fullscreenchange事件：浏览器进入或离开全屏时触发。
• fullscreenerror事件：浏览器无法进入全屏时触发，可能是技术原因，也可能是用户拒绝。

6. 全屏状态的CSS
   全屏状态下，大多数浏览器的CSS支持:full-screen伪类，只有IE11支持:fullscreen伪类。使用这个伪类，可以对全屏状态设置单独的CSS属性。

:-webkit-full-screen {
  /* properties */
}

:-moz-full-screen {
  /* properties */
}

:-ms-fullscreen {
  /* properties */
}

:full-screen { /*pre-spec */
  /* properties */
}

:fullscreen { /* spec */
  /* properties */
}

/* deeper elements */
:-webkit-full-screen video {
  width: 100%;
  height: 100%;
}

2、JS插件 Fullscreen.js

方法
一下方法通过 $.AMUI.fullscreen 接口调用。

.request()
使元素全屏。接受一个 DOM 元素作为参数，默认为 html。

//<iframe> 中需要添加 allowfullscreen 属性 (+ webkitallowfullscreen and moz allowfullscreen)。
<iframe id="frame1" allowfullscreen mozallowfullscreen webkitallowfullscreen src="iframeTest.html"></iframe>

注意全屏 API 仅能通过用户事件（如 click、touch、key） 初始化。

.exit()
退出全屏模式。

.toggle()
全屏模式切换。

.onchange()
全屏模式发生改变时获得通知。
建议使用下面的事件监听：

$(document).on($.AMUI.fullscreen.raw.fullscreenchange, function () {});

.onerror()
全屏模式发生错误时获得通知。
建议使用下面的事件监听：

$(document).on($.AMUI.fullscreen.raw.fullscreenerror, function () {});

属性
.isFullscreen
布尔值，是否处于全屏模式。

.element
返回当前处于全屏模式的元素，没有则返回 null。

.enabled
是否允许全屏模式。 中的页面需要添加 allowfullscreen 属性 (+ webkitallowfullscreen and moz allowfullscreen)。

.raw
返回包含原始方法名称的对象，对象 key 包括： requestFullscreen, exitFullscreen, fullscreenElement, fullscreenEnabled, fullscreenchange, fullscreenerror

$(document).on($.AMUI.fullscreen.raw.fullscreenchange, function () {
    console.log('Fullscreen change');
});

全屏整个页面

$('#demo-full-page').on('click', function () {
    if ($.AMUI.fullscreen.enabled) {
    $.AMUI.fullscreen.request();
    } else {
        // Ignore or do something else
    }
});

$('#demo-full-img').on('click', function () {
    if ($.AMUI.fullscreen.enabled) {
    $.AMUI.fullscreen.request(this);
    }
});

if (fullscreen.enabled) {
    $(document).on($.AMUI.fullscreen.raw.fullscreenchange, function () {
        console.log('Am I fullscreen? ' + ($.AMUI.fullscreen.isFullscreen ? 'Yes' : 'No'));
    });
}

参考地址