Кода -копия выглядит следующим образом:
// судить различные браузеры и найти правильный метод
Функция запускаемого экрана (элемент) {
if (element.requestfullscreen) {
element.requestfullScreen ();
} else if (element.mozrequestfullscreen) {
element.mozrequestfullscreen ();
} else if (element.webkitrequestfullscreen) {
element.webkitrequestfullscreen ();
} else if (element.msrequestfullscreen) {
element.msRequestfullScreen ();
}
}
// запустить полный экран!
StackfullScreen (document.documentelement);
Запустить SpekfullScreen (Document.getElementById ("Vieleementement"); // Элемент страницы
Вызовите метод полного экрана на элементах страницы, которые вы хотите отобразить на полноэкранном режиме, и окно браузера станет полноэкранным, но пользователь будет первым запросом, чтобы разрешить полноэкранный режим. Имейте в виду, что пользователи могут отклонить режим полного экрана. Если пользователь запускает полноэкранный режим, панель инструментов браузера и другие меню кнопок будут скрыты, а ваша страница будет охватывать весь экран.
Выйти из полноэкранного режима
Этот метод выхода (который также требует префикса браузера) приведет к тому, что браузер выходит из режима полноэкранного режима и станет нормальным режимом.
Кода -копия выглядит следующим образом:
// определить тип браузера
Функция exitfullScreen () {
if (document.exitfullscreen) {
document.exitfullScreen ();
} else if (document.mozcancelfullscreen) {
document.mozcancelfullscreen ();
} else if (document.webkitexitfullscreen) {
document.webkitexitfullscreen ();
}
}
// Выход с полным экраном режима!
ExitfullScreen ();
Следует отметить, что ExitfullScreen может быть вызван только объектом документа, а не объектом, передаваемым при запуске полноэкранного экрана.
Свойства и события полного экрана
К сожалению, полноэкранные свойства и связанные с ними методы для событий также требуются префикс браузера, но я считаю, что это не потребуется в ближайшее время.
1.document.fullScreenelement: полноэкранная веб -страница.
2.document.fullScreenenabled: определяет, находится ли он в настоящее время на полном экране.
Событие FullScreenchange будет запускается при запуске или выходе полноэкранного экрана:
Кода -копия выглядит следующим образом:
VAR
var fullScreenenabled = document.fullScreenenabled || Document.MozfullScreenenable
Вы по -прежнему можете префикс этого события, используя приведенный выше метод для определения типа браузера.
CSS с полным экраном
Различные браузеры предоставляют очень полезное правило стиля CSS в режиме полноэкранного режима:
Скопируйте код следующим образом ::-Webkit-Full-Screen {
/* характеристики */
}
: -moz-full-экрана {
/* характеристики */
}
: -ms-fullScreen {
/* характеристики */
}
: Полноэкран { / *pre-spec * /
/* характеристики */
}
: FullScreen { / * Spec * /
/* характеристики */
}
/ * Более глубокие элементы */
: -Webkit-full-экрана видео {
Ширина: 100%;
высота: 100%;
}
/* стилирование фона*/
:: Фон {
/* характеристики */
}
::-ms-backdrop {
/* характеристики */
}
В некоторых случаях есть некоторые проблемы со стилями Webkit, и вам лучше сохранить эти стили простыми.
Эти полноэкранные API очень просты и очень полезны. В первый раз, когда я увидел этот API в демо-версии MDN Bananabread, это была игра съемки, которая оказалась полноэкранной, в которой использовались события, прослушивая, чтобы обнаружить полноэкранное состояние. Помните эти полезные API, вы можете забрать их, когда они вам нужны.