Сьогодні на роботі я зіткнувся з потребою у повноекранному відображенні веб-сторінки, тому перевірив 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);
Це працює лише тоді, коли код запускається взаємодією користувача (наприклад, подія на кнопці). Браузери не дозволяють входити в повноекранний режим без участі користувача.
Вихід з повноекранного режиму
Повноекранний режим завжди виходить через документ, але цей плагін дозволяє це також через будь-який HTML-елемент. Тоді використовується власний документ обраного HTML-елемента:
$(document).fullScreen (неправди);
$("#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("Browser відхилило повноекранну зміну");
});
Повноекранний 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
|
