js实现页面全屏和元素全屏

全屏API

H5有一个全屏API，Element.requestFullscreen() 方法用于发出异步请求使元素进入全屏模式。

需要注意的是：只有包含在顶层文档内部的标准HTML元素、svg元素和math元素，以及拥有allowfullscreen属性的iframe的内部元素可以进入全屏模式。这意味着在frame内部的元素，以及object的内部元素不能进入全屏模式。

全屏事件

如果元素被允许进入全屏模式，document对象会收到一个fullscreenchange事件，通知调用者当前元素已经进入全屏模式。如果全屏请求不被许可，则会收到一个fullscreenerror事件。

document.addEventListener('fullscreenchange', function(){ /*code*/ });
document.addEventListener('webkitfullscreenchange', function(){ /*code*/});
document.addEventListener('mozfullscreenchange', function(){ /*code*/});
document.addEventListener('MSFullscreenChange', function(){ /*code*/});

document.addEventListener('fullscreenerror', function(){ /*code*/ });
document.addEventListener('webkitfullscreenerror', function(){ /*code*/});
document.addEventListener('mozfullscreenerror', function(){ /*code*/);
document.addEventListener('MSFullscreenError', function(){ /*code*/ });

全屏样式

全屏之后还可以选择性的调整样式，就和hover一样，如下所示：

:-webkit-full-screen { }
:-moz-full-screen { }
:-ms-fullscreen { }
:fullscreen { }

示例代码如下：

  
  
  


  全屏模式
  取消全屏
  
    注意: 
    全屏方法xxRequestFullScreen()是需要全屏元素的方法
    取消全屏xxExitFullscreen()是document的方法