api窗口全屏

api窗口全屏

As we move toward more true web applications, our JavaScript APIs are doing their best to keep up.  One very simple but useful new JavaScript API is the Fullscreen API.  The Fullscreen API provides a programmatic way to request fullscreen display from the user, and exit fullscreen when desired.  Here's how to use this incredibly simple API!

随着我们朝着更真实的Web应用程序迈进，我们JavaScript API正在竭尽所能。 全屏API是一种非常简单但有用的新JavaScript API。 全屏API提供了一种编程方式来请求用户全屏显示，并在需要时退出全屏。 这是使用这个极其简单的API的方法！

View Demo 观看演示

启动全屏模式 (Launching Fullscreen Mode)

The fullscreen API's requestFullscreen method is still prefixed in some browsers, so you'll need to do a bit of searching to find it:

在某些浏览器中，全屏API的requestFullscreen方法仍带有前缀，因此您需要做一些搜索才能找到它：

// Find the right method, call on correct element function launchIntoFullscreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); } else if(element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if(element.webkitRequestFullscreen) { element.webkitRequestFullscreen(); } else if(element.msRequestFullscreen) { element.msRequestFullscreen(); } } // Launch fullscreen for browsers that support it! launchIntoFullscreen(document.documentElement); // the whole page launchIntoFullscreen(document.getElementById("videoElement")); // any individual element

Simply call the request method on the element you'd like to receive fullscreen and the window morphs to fullscreen, requesting that the user allow fullscreen mode.  Remember it's plausible that the user will reject fullscreen mode.  If fullscreen mode is accepted, the toolbars and general chrome go away, making the document frame span the entire width and height of the screen.

只需在您希望接收全屏的元素上调用request方法，然后窗口就会变为全屏，要求用户允许全屏模式。 请记住，用户拒绝全屏模式是合理的。 如果接受全屏模式，则工具栏和常规镶边将消失，从而使文档框架跨越屏幕的整个宽度和高度。

退出全屏模式 (Exiting Fullscreen Mode)

The exitFullscreen method (also prefixed in older browsers) morphs the browser chrome back into standard layout:

exitFullscreen方法(在较早的浏览器中也有前缀)将浏览器chrome变回标准布局：

// Whack fullscreen function 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();

Note that exitFullscreen is called on the document object only -- not needing to pass the individual element itself.

请注意，仅在文档对象上调用exitFullscreen不需要传递单个元素本身。

全屏属性和事件 (Fullscreen Properties & Events)

Unfortunately the events and properties are still prefixed, but will be unprefixed over time.

不幸的是，事件和属性仍然是前缀，但是随着时间的流逝将不再前缀。

document.fullScreenElement: the element which has been pushed to fullscreen.

document.fullScreenElement ：已被推送到全屏的元素。

document.fullScreenEnabled:  notes if fullscreen is current enabled.

document.fullScreenEnabled ：注释当前是否启用了全屏。

The fullscreenchange event lets us know when we go to/from fullscreen mode:

The fullscreenchange事件使我们知道何时进入/离开全屏模式：

var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement; var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;

You can detect which browser-prefixed event to use along with the initial fullscreen method detection.

您可以检测使用哪个浏览器前缀事件以及初始全屏方法检测。

全屏CSS (Fullscreen CSS)

Browsers do provide us one helpful bit of fullscreen CSS control:

浏览器确实为我们提供了一些有用的全屏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%; } /* styling the backdrop*/ ::backdrop { /* properties */ } ::-ms-backdrop { /* properties */ }

In some cases, WebKit needs a bit of help, so the code above should be kept handy if you're dealing with media.

在某些情况下，WebKit需要一些帮助，因此，如果您要处理媒体，上面的代码应该保持方便。

View Demo 观看演示

The fullscreen API is super simple and super useful.  I first saw this API used with MDN's BananaBread demo, an all-client-side first person shooter, a perfect excuse to go fullscreen.  The fullscreen API provides a way to enter and exit fullscreen mode, as well as an event to detect fullscreen state change, so all bases are covered.  Keep this nice API in mind for your future ventures -- it may come in handy!

全屏API非常简单，也非常有用。 我首先看到该API与MDN的BananaBread演示一起使用 ，该演示是全客户端第一人称射击游戏，是全屏浏览的完美借口。 全屏API提供了一种进入和退出全屏模式的方法，以及检测全屏状态变化的事件，因此涵盖了所有基础。 请记住这个不错的API，以方便您将来进行投资-可能会派上用场！

翻译自: https://davidwalsh.name/fullscreen

api窗口全屏

相关资源：仅用Windows API实现的窗口全屏