У меня следующая проблема: при переключении пользовательского полноэкранного режима из веб-приложения окружающий фон черный, и я хочу изменить его (как фактический фон).
Подробности ниже.
1) Код Javascript для переключения в полноэкранный режим и фокусировки на внутреннем элементе
function toggleFullScreen(elem) {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
}
$(function () {
$("#fullscreenButton").click(function () {
var actualBody = document.getElementById("@FullScreenElementId");
if (actualBody) {
toggleFullScreen(actualBody);
}
});
$(document).on("webkitfullscreenchange mozfullscreenchange fullscreenChange MSFullscreenChange", function (/*data*/) {
var actualBodyJq = $("#@FullScreenElementId");
if (actualBodyJq) {
actualBodyJq.toggleClass("fullscreen-style");
}
$("body").toggleClass("fullscreen-body-style");
});
});
2) CSS-стили
.fullscreen-style {
overflow-y: scroll;
background-color: rgb(255, 255, 255) !important;
}
.fullscreen-body-style {
background-color: rgb(255, 255, 255) !important;
}
Переключение в полноэкранный режим для div работает, но применение стиля для тела, похоже, игнорируется. Для показанного изображения я вижу этот вычисленный стиль для фона:
Вопрос: можно ли контролировать, как браузер (Chrome, Internet Explorer 11+) отображает "недостающую область"?
