html5常用API之Full Screen

所谓Full Screen API，就是全屏API，在html5中，该API允许开发者以编程方式将Web应用程序全屏运行，使Web应用程序更像本地应用程序。这款API十分简单有用，是html5初学者必须掌握的一款API，今天小编就为大家分享分享这款API的具体使用方法。

 

Full Screen 的介绍

FullScreen API使用非常简单，在html5中，共有两种模式，分别是：

 

Launching Fullscreen Mode 启动全屏模式

    // 找到适合浏览器的全屏方法  function launchFullScreen(element) { 

  if(element.requestFullScreen) { 

    element.requestFullScreen(); 

  } else if(element.mozRequestFullScreen) { 

    element.mozRequestFullScreen(); 

  } else if(element.webkitRequestFullScreen) { 

    element.webkitRequestFullScreen(); 

  } 

} 

// 启动全屏模式 

launchFullScreen(document.documentElement); // the whole page 

launchFullScreen(document.getElementById("videoElement")); // any individual element

 

Exit FullScreen Mode 退出全屏模式

// Whack fullscreenfunction exitFullscreen() {

  if(document.exitFullscreen) {

    document.exitFullscreen();

  } else if(document.mozCancelFullScreen) {

    document.mozCancelFullScreen();

  } else if(document.webkitExitFullscreen) {

    document.webkitExitFullscreen();

  }

}

 

// Cancel fullscreen for browsers that support it!

exitFullscreen();

 

Full Screen 的相关属性和事件

虽然，Full ScreenAPI简单易用，但目前 仍存在兼容的问题，许多能使用的浏览器仍需要在其相应的属性和事件加相关的前缀。

【document.fullScreenElement】 该属性表示启动全屏的元素（如 video这些）

【document.fullScreenEnabled】 该属性表示当前是否全屏

【fullscreenchange 事件】 监听全屏状态改变的事件

 

2.2 Full Scrren 相关的css属性

众所周知，说到html，就不得不提css，而fullscreen API 中也有一些关于的css属性：

:-webkit-full-screen,

:-moz-full-screen,

:-ms-fullscreen,

:full-screen {

  /*pre-spec */

   /* properties */

}

:fullscreen {

  /* spec */

   /* properties */

}

/* deeper elements */:-webkit-full-screen video {

   width: 100%;

   height: 100%;

}

/* styling the backdrop*/::backdrop {

  /* properties */

}

::-ms-backdrop {

  /* properties */

}

 

结束语

       在屏幕大小有限的移动端，全屏功能显得异常重要，虽然现目前Full Screen API还存在一些兼容问题，但相信这些问题肯定很快会找到解决办法，且这个API肯定也会成为移动互联网时代最常用的API之一。

 

相关文章：《Web前端之jQuery 的10大操作技巧》