Сегодня на работе я столкнулся с необходимостью в полноэкранном отображении веб-страницы, поэтому проверил Baidu и нашёл плагин jQuery для полноэкранного отображения веб-страниц: jquery FullScreen Plugin. Он позволяет отображать полноэкранные веб-страницы для различных браузеров, включая FF 10, Chrome и Safari, и используется для предоставления пользователям более читаемой версии веб-страницы, которую можно <canvas>масштабировать и <video>элементировать.
Полноэкранный плагин jQuery
Описание
Этот плагин jQuery предоставляет простой в использовании механизм управления новым полноэкранным режимом современных браузеров. В настоящее время только новые браузеры на базе Webkit (такие как Chrome и Safari), Firefox и IE11+ предоставляют эту новую функцию полноэкранного режима.
Использование
Переход в полноэкранный режим
Вы можете либо переключить всю страницу, либо один HTML-элемент в полноэкранный режим:
$(document).fullScreen(true);
$("#myVideo").fullScreen(true);
Это работает только тогда, когда код запускается при взаимодействии пользователя (например, событие onclick на кнопке). Браузеры не позволяют входить в полноэкранный режим без взаимодействия пользователя.
Выход из полноэкранного режима
Полноэкранный режим всегда выходит через документ, но этот плагин также позволяет использовать любой HTML-элемент. Затем используется документ-владелец выбранного HTML-элемента:
$(document).fullScreen(false);
$("#myVideo").fullScreen(ложно);
Запрос в полноэкранном режиме
Просто не передайте аргумент методу полноэкранного режима, чтобы запросить текущее состояние. Метод возвращает текущий элемент полноэкранного режима (или true, если браузер не поддерживает это), когда режим активен, false если он активен, или null, если браузер не поддерживает полноэкранный режим Вообще не было режима. Таким образом, вы можете использовать этот способ для отображения кнопки на весь экран только тогда, когда браузер поддерживает полноэкранный режим:
$("#fullscreenButton").toggle($(document).fullScreen() != null))
Переключение полноэкранного режима
Плагин предлагает ещё один способ простого переключения полноэкранного режима:
$(document).toggleFullScreen();
Уведомления
Плагин запускает событие полной смены экрана в документе при изменении режима полноэкранного режима. Если браузер отклонил изменение состояния на весь экран, плагин запускает событие полноэкранной ошибки в документе. Пример:
$(document).bind("fullscreenchange", function() {
console.log("Fullscreen " + ($(document).fullScreen() ?" включено: «выключено»);
});
$(document).bind("fullscreenerror", function() {
alert("Браузер отклонил полноэкранное изменение");
});
Полноэкранный iframe
Переход в полноэкранный режим внутри iframe по умолчанию не разрешен, но его можно включить с помощью нескольких атрибутов на iframe:
<iframe src="iframe.html" webkitAllowFullScreen mozAllowFullScreen allowFullScreen>
</iframe>
Известные проблемы
В IE 11 при входе в полноэкранный режим из iframe отображается пустая страница. Понятия не имею почему. Любая помощь приветствуется.
В Safari (по крайней мере в Safari 7) ввод с клавиатуры в полноэкранном режиме не допускается.
Адрес GitHub: https://github.com/kayahr/jquery-fullscreen-plugin
Туристы, если вы хотите увидеть скрытое содержание этого поста, пожалуйста Ответ
| 
Опубликовано 14.08.2017 16:34:52
|
|
|
Опубликовано 14.08.2017 17:08:18
|
Опубликовано 25.11.2017 14:35:17
|
