Речь идёт о раскрытии контента на весь экран, полностью. Данный скрипт с этой задачей справляется, вот код:
<script>
document.cancelFullScreen = document.cancelFullScreen || document.webkitCancelFullScreen || document.mozCancelFullScreen;
function onFullScreenEnter() {
console.log("Enter fullscreen initiated from iframe");
};
function onFullScreenExit() {
console.log("Exit fullscreen initiated from iframe");
};
function enterFullscreen(id) {
onFullScreenEnter(id);
var el = document.getElementById(id);
var onfullscreenchange = function(e){
var classGreen = document.getElementsByClassName('classGreen');
for (var i = 0; i < classGreen.length; i++) {
classGreen[i].className = (classGreen[i].className == 'classGreen' ? 'classGreen classRed' : 'classGreen');
}
var fullscreenElement = document.fullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement;
var fullscreenEnabled = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitFullscreenEnabled;
console.log( 'fullscreenEnabled = ' + fullscreenEnabled, ', fullscreenElement = ', fullscreenElement, ', e = ', e);
}
el.addEventListener("webkitfullscreenchange", onfullscreenchange);
el.addEventListener("mozfullscreenchange", onfullscreenchange);
el.addEventListener("fullscreenchange", onfullscreenchange);
if (el.webkitRequestFullScreen) {
el.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
} else {
el.mozRequestFullScreen();
}
document.querySelector('#'+id + ' button').onclick = function(){
exitFullscreen(id);
}
}
function exitFullscreen(id) {
onFullScreenExit(id);
document.cancelFullScreen();
document.querySelector('#'+id + ' button').onclick = function(){
enterFullscreen(id);
}
}
</script>
В этом коде есть функция, которую я добавил, чтобы отображать скрытый контент при обычном экране. Всё что делает эта функция, так это добавляет css class к элементу
<div>, проблема возникает при повторном клике,
картинка - скрытый элемент, которая в развёрнутом виде появляется на экране, во второй раз исчезает, третий раз появляется, четвёртый опять пропадает, короче отображается только по нечётному числу кликов.
Вот кусок кода, который косячит:
function enterFullscreen(id) {
onFullScreenEnter(id);
var el = document.getElementById(id);
var onfullscreenchange = function(e){
var classGreen = document.getElementsByClassName('classGreen');
for (var i = 0; i < classGreen.length; i++) {
classGreen[i].className = (classGreen[i].className == 'classGreen' ? 'classGreen classRed' : 'classGreen');
}
var fullscreenElement = document.fullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement;
var fullscreenEnabled = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitFullscreenEnabled;
console.log( 'fullscreenEnabled = ' + fullscreenEnabled, ', fullscreenElement = ', fullscreenElement, ', e = ', e);
}
Подскажите пожалуйста в чём ошибка, и почему она происходит, я хочу понять.
Заранее благодарю.
