В проекте фоновое окно браузера должно быть полностью экранировано, то есть мы нажимаем кнопку, чтобы достичь эффекта нажатия полного экрана F11. В HTML5 W3C сформулировал полноэкранный API, который может достигать полноэкранных эффектов, а также может разрешать полноэкранные изображения, видео и т. Д. На странице иметь полноэкранные изображения, которые в настоящее время поддерживаются только Google Chrome 15+, SAFRI5.1+, FIRFOX10+, IE11.
полноэкранный
var docelm = document.documentelement; // w3c if (docelm.requestfullscreen) {docelm.requestfullscreen (); } // firefox else if (docelm.mozrequestfullscreen) {docelm.mozrequestfullscreen (); } // ie11else if (elem.msrequestfullscreen) {{elem.msrequestfullscreen ();}Выйдите из полного экрана
if (document.exitfullscreen) {document.exitfullscreen (); } else if (document.mozcancelfullscreen) {document.mozcancelfullscreen (); } else if (document.webkitcancelfullscreen) {document.webkitcancelfullscreen (); } else if (document.msexitfullscreen) {document.msexitfullscreen (); }Слушание событий
document.addeventlistener ("fullscreenchange", function () {fullScreenState.innerhtml = (document.fullScreen)? "": "не";}, false); document.addeventlistener ("mozfullscreenchange", function () {fullscreenstate.innerhtml = (document.mozfullscreen)? "": "не";}, false); document.addeventlistener ("webkitfullscreenchange", function () {fullscreenstate.innerhtml = (document.webkitesfullscreen)? "": "не";}, false); document.addeventlistener ("msfullscreenchange", function () {fullscreenstate.innerhtml = (document.msfullscreenelement)? "": "не";}, false);Настройки стиля с полным экраном
Мы также можем использовать полноэкранную браузер для установки стилей
html: -moz-full-экрана {фон: красный; } html: -webkit-full-screen {founale: red; } html: FullScreen {founale: red; }Приложение
1 онлайн демо
http://robnyman.github.io/fullscreen/
2 полноэкранного API HTML5 для фишинга
http://www.36ria.com/5807
3 полноэкранного плагина, инкапсулированного jQuery
http://johndyer.name/native-fullscreen-javascript-api-lus-jquery-plugin/
4 более подробное полноэкранированное введение API
4.1 https://developer.mozilla.org/en-us/docs/web/guide/api/dom/using_full_screen_mode
4.2 https://dvcs.w3.org/hg/fullscreen/raw-file/tip/overview.html
5 Дисплей различий в полноэкранном API HTML5 в Firefox/Chrome
http://www.zhangxinxu.com/wordpress/2012/10/html5-full-creen-api-firefox-chrome-difference/