Я пишу приложение для себя, в котором мне нужно автоматически запускать полноэкранный режим с помощью JavaScript (сегодня я имитирую печать F11, которая обычно работает, но не всегда).
Я хотел бы использовать .requestFullscreen()
(через screenfull.js
), но я получаю
Не удалось выполнить "requestFullscreen" в "Element": API может быть инициирован только жестом пользователя.
Это понятно (по соображениям безопасности/спама/удобства использования) и упоминается на многочисленных страницах.
Теперь, поскольку это мое приложение работает в моем браузере Chrome, я хотел бы иметь возможность разрешить этот запрос в моем браузере. Возможно ли это для Chrome?
Вы можете использовать режим киоска:
В Windows:
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --chrome --fullscreen --kiosk http://10.20.30.40/page/
В Linux
chrome --chrome --fullscreen --kiosk http://10.20.30.40/page/
Полноэкранный api немного запутан, потому что на данный момент ни один браузер не принимает обычную "неподготовленную" версию. Mozilla имеет довольно хорошее объяснение полноэкранного api здесь, со списком соответствующих префиксов.
Чтобы получить полноэкранный .webkitRequestFullscreen()
в Chrome, вам действительно нужно вызвать .webkitRequestFullscreen()
. Если вы хотите поддерживать несколько браузеров, вам нужно использовать блок if-else, чтобы убедиться, что у вас есть все правильные префиксы, например:
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullScreen) {
elem.webkitRequestFullScreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
Это уродливо, но, к сожалению, это необходимо. Вам также необходимо добавить соответствующие префиксы для выхода из полноэкранного режима и на любой css, который вы можете применить. Последней ошибкой, которую вы можете заметить, является то, что браузеры webkit не отображают элемент в полноразмерном режиме в полноэкранном режиме, поэтому вам нужно добавить следующее в таблицу стилей.
-webkit-full-screen {
width: 100%;
height: 100%;
}