План реализации
//Входим в полноэкранный режим
function requestFullScreen(de) {
if(de.requestFullscreen){
//W3C
de.requestFullscreen();
}else if (de.mozRequestFullScreen){
//FIREFOX
de.mozRequestFullScreen();
}else if (de.webkitRequestFullScreen){
//CHROME
de.webkitRequestFullScreen();
}else if (de.msRequestFullscreen){
//MSIE
de.msRequestFullscreen();
}else if(element.oRequestFullscreen){
element.oRequestFullscreen();
}else{
var docHtml = document.documentElement;
var docBody = document.body;
var videobox = document.getElementById('playerBox');
var cssText = 'width:100%;height:100%;overflow:hidden;';
docHtml.style.cssText = cssText;
docBody.style.cssText = cssText;
videobox.style.cssText = cssText+';'+'margin:0px;padding:0px;';
document.IsFullScreen = true;
}
}
//Выходим из полноэкранного режима
function exitFullscreen(de) {
if (de.exitFullscreen) {
//W3C
de.exitFullscreen();
}else if(de.mozCancelFullScreen){
//FIREFOX
de.mozCancelFullScreen();
}else if(de.webkitCancelFullScreen){
//CHROME
de.webkitCancelFullScreen();
}else if(de.msExitFullscreen){
//MSIE
de.msExitFullscreen();
}else if(de.oRequestFullscreen){
de.oCancelFullScreen();
}else{
var docHtml = document.documentElement;
var docBody = document.body;
var videobox = document.getElementById('playerBox');
docHtml.style.cssText = "";
docBody.style.cssText = "";
videobox.style.cssText = "";
document.IsFullScreen = false;
}
}
Приведенный выше план, состоящий из множества «если… иначе…», выглядит очень неудобно. Ниже приводится оптимизированный план, основанный на плане мастера.
//Полноэкранная функция
document.getElementById("ck_buts").onclick = function() {
var elem = document.getElementById("dashboard_id");
elem.style.width = "100%";
elem.style.height = "100%";
elem.style.overflowY = "scroll";
requestFullScreen(elem); // элемент страницы
//requestFullScreen(document.documentElement); // вся веб-страница
};
function requestFullScreen(element) {
// Оцените различные браузеры и найдите правильный метод
var requestMethod = element.requestFullScreen || //W3C
element.webkitRequestFullScreen || //FireFox
element.mozRequestFullScreen || //Хром и т.д.
element.msRequestFullScreen; //IE11
if (requestMethod) {
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") { //for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
//Выходим из полноэкранного режима Определить тип браузера
function exitFull() {
// Оцените различные браузеры и найдите правильный метод
var exitMethod = document.exitFullscreen || //W3C
document.mozCancelFullScreen || //FireFox
document.webkitExitFullscreen || //Хром и т.д.
document.webkitExitFullscreen; //IE11
if (exitMethod) {
exitMethod.call(document);
} else if (typeof window.ActiveXObject !== "undefined") { //for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
Слушайте события выхода из полноэкранного режима
//Слушайте события выхода из полноэкранного режима
window.onresize = function() {
if (!checkFull()) {
//Действие, которое необходимо выполнить
$("#dashboard_id").removeClass('expand').addClass('contract');//Я здесь ленив и использую JQ для прямого изменения имени класса
}
}
function checkFull() {
var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
//to fix : false || undefined == undefined
if (isFull === undefined) {isFull = false;}
return isFull;
}/* Your code... */
Эта статья принимает 「CC BY-NC-SA 4.0」творческое достояниепротокол,При перепечатке отметьте следующую информацию:
Первоисточник: Юйвен https://cloud.tencent.com/developer/article/2193092