HTML5 Fullscreen API
Вступление
Всем доброго времени суток. Недавно в моей практике проскочила идея сделать веб-приложение по настоящему приложением, то есть чтобы можно было работать с ним на весь экран. Конечно для этого существуют горячие клавиши в браузере, к примеру F11 в chrome, но лично мне не хотелось оповещать пользователей с помощью подсказок, и в HTML5 нашелся ответ.
Методы
А теперь разберем как же нам открыть нашу веб-страничку на весь экран.
element.requestFullScreen()
Открывает конкретный элемент на весь экран, к примеру,
document.getElementById(“myvideo”).requestFullScreen()
откроет элемент с id=«myvideo» на весь экран.
document.cancelFullScreen()
Выводит браузер из полноэкранного режима в стандартный.
document.fullScreen
Возвращает true если браузер в полноэкранном режиме
:full-screen
CSS псевдокласс, применяемый к элементу, когда браузер в полноэкранном режиме.
Пример
А теперь немножко кода
var prfx = ["webkit", "moz", "ms", "o", ""];
function RunPrefixMethod(obj, method) {
var p = 0, m, t;
while (p < prfx.length && !obj[m]) {
m = method;
if (prfx[p] == "") {
m = m.substr(0,1).toLowerCase() + m.substr(1);
}
m = prfx[p] + m;
t = typeof obj[m];
if (t != "undefined") {
prfx = [prfx[p]];
return (t == "function" ? obj[m]() : obj[m]);
}
p++;
}
}
Эта функция будет выводить браузер в полноэкранный режим и обратно, поскольку официально данная функция, как мне известно, не включена в HTML5 работает она с префиксами, для chrome и safari — .webkit, для firefox — .moz, для ie — ms и для оперы — .o
а теперь пример обращения
var elm = document.getElementById("yourelementid");
elm.onclick = function() {
if (RunPrefixMethod(document, "FullScreen") || RunPrefixMethod(document, "IsFullScreen")) {
RunPrefixMethod(document, "CancelFullScreen");
}
else {
RunPrefixMethod(elm, "RequestFullScreen");
}
}
при нажатии на элемент, указанный вами, он будет выведен на полный экран, к примеру можно указать изображение, слайдшоу или видео.
Это все, что я хотел написать на эту тему. До новых встреч.