一、JS代码全称
JS全屏代码是指通过JavaScript实现网页全屏化的一种技术。将HTML元素全屏显示，常在需要功能强大的特效的网站中比较常用，比如视频网站、图片展示网站等等。
二、JS全屏事件
实现JS全屏的第一个步骤就是监听全屏事件，基本语法如下：
// 全屏事件。标准写法 document.onfullscreenchange
var changeEvent = function() {
console.log("fullscreen", document.fullscreen);
console.log("全屏状态发生变化");
};
document.addEventListener("fullscreenchange", changeEvent, false);
document.addEventListener("mozfullscreenchange", changeEvent, false);
document.addEventListener("webkitfullscreenchange", changeEvent, false);
document.addEventListener("MSFullscreenChange", changeEvent, false);
代码解析：
使用addEventListener函数监听全屏事件，监听了四种事件：fullscreenchange、mozfullscreenchange、webkitfullscreenchange、MSFullscreenChange，分别对应不同浏览器。其中，changeEvent函数是回调函数，当监听到事件时，系统会调用该函数。
三、JS代码大全
下面给出JS全屏代码，并且可以兼容 Chrome、Firefox、Safari、Opera、Edge 和 IE11 浏览器：
function launchFullScreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
function exitFullScreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if(document.msExitFullscreen) {
document.msExitFullscreen();
}
}
代码解析：
launchFullScreen函数是将指定元素（element）全屏显示的函数；exitFullScreen函数是退出全屏显示的函数。
四、JS全屏滚动
在全屏显示的时候，我们也经常需要全屏滚动的功能，以下给出滚动的基本代码：
// 在element中，滑动时触发以下函数
element.ontouchmove = function(event) {
event.preventDefault();
};
// 滚轮滚动控制函数，兼容多浏览器
window.addEventListener("mousewheel", scrollFunc, false);
window.addEventListener("DOMMouseScroll", scrollFunc, false);
function scrollFunc(e) {
e = e || window.event;
if (e.wheelDelta) {
//ie/chrome
if (e.wheelDelta > 0) {
document.title = "向上滚";
element.scrollTop -= 30;
} else if (e.wheelDelta < 0) {
document.title = "向下滚";
element.scrollTop += 30;
}
} else if (e.detail) {
//Firefox
if (e.detail > 0) {
document.title = "向下滚";
element.scrollTop += 30;
} else if (e.detail < 0) {
document.title = "向上滚";
element.scrollTop -= 30;
}
}
}
代码解析：
在移动端，我们需要监听用户滚动操作，用element.ontouchmove函数来实现。在PC端，我们则要通过addEventListener监听DOMMouseScroll、mousewheel事件，分别代表Firefox和IE/Chrome浏览器的浏览器滚轮事件。然后通过判断浏览器类型调用scrollFunc函数，实现滚轮滚动的效果。
五、JS自动全屏
有时我们需要在页面中自动全屏，以下代码实现了自动全屏：
// 开启自动全屏
var autoFull = function(eleme) {
var ua = window.navigator.userAgent.toLowerCase(),
docElm = doc.documentElement,
i,
ch,
sc,
si;
eleme.onclick = function() {
// 判断浏览器类别，调用不同函数
if (/chrome\/(\d{2})/i.test(ua)) {
sc = document.documentElement.scrollTop;
eleme.requestFullscreen();
window.setTimeout(function() {
document.documentElement.scrollTop = document.body.scrollTop = sc;
}, 200);
} else if (/firefox\/(\d{2})/i.test(ua)) {
si = docElm.scrollTop;
eleme.requestFullscreen();
window.setTimeout(function() {
docElm.scrollTop = si;
}, 200);
} else {
ch = document.documentElement.clientHeight;
i = document.documentElement.scrollTop || document.body.scrollTop;
eleme.requestFullscreen();
window.setTimeout(function() {
document.documentElement.scrollTop = document.body.scrollTop = (i * document.documentElement.clientHeight) / ch;
}, 200);
}
};
};
代码解析：
autoFull函数实现了自动全屏，其中包含判断浏览器类别，调用不同函数的功能。chrome浏览器需要记录滚动条位置，Firefox需要记录文档流位置，其他浏览器需要记录文档位置和浏览器高度进行换算。
六、JS浏览器全屏
对于一些不需要全屏显示内容的网站，我们也可以实现浏览器全屏的效果，以下代码实现了浏览器全屏：
var fullScreen = function(el) {
if (el.requestFullscreen) {
el.requestFullscreen();
} else if (el.msRequestFullscreen) {
el.msRequestFullscreen();
} else if (el.mozRequestFullScreen) {
el.mozRequestFullScreen();
} else if (el.webkitRequestFullScreen) {
el.webkitRequestFullScreen();
} else {
alert("Sorry，您的浏览器不能全屏浏览！");
}
};
代码解析：
fullScreen函数实现了浏览器全屏的效果，同样兼容不同的浏览器类型。
七、JS页面全屏
在一些特殊情况下，我们需要实现整个网页的全屏，这时候需要进行以下操作：
function launchFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
// 添加Evnet Listener
element.addEventListener("webkitfullscreenchange", function() {
element.webkitRequestFullScreen();
});
element.addEventListener("fullscreenchange", function() {
element.requestFullscreen();
});
element.addEventListener("mozfullscreenchange", function() {
element.mozRequestFullScreen();
});
element.addEventListener("MSFullscreenChange", function() {
element.msRequestFullscreen();
});
}
代码解析：
launchFullscreen函数实现了整个网页的全屏显示，兼容性也比较好，但是需要添加webkitfullscreenchange、fullscreenchange、mozfullscreenchange、MSFullscreenChange这几个事件，否则在全屏模式下某些浏览器会出现全屏不完全、全屏退出异常等问题。
八、JS浏览器自动全屏
以下代码实现了浏览器自动全屏：
function browserFullScreen() {
var el = document.documentElement,
rfs =
el.requestFullScreen ||
el.webkitRequestFullScreen ||
el.mozRequestFullScreen ||
el.msRequestFullscreen;
if (typeof rfs != "undefined" && rfs) {
rfs.call(el);
}
}
代码解析：
browserFullScreen函数实现了浏览器自动全屏，只需调用该函数就可以实现自动全屏。
九、JS监听全屏事件
以下代码给出了监听全屏事件的用例：
document.addEventListener(
"fullscreenchange",
function(e) {
console.log("全屏change事件", JSON.stringify(e));
},
false
);
代码解析：
addEventListener函数监听了fullscreenchange事件，该事件的触发表示浏览器的全屏状态发生了改变，其回调函数console.log输出了监听到的全屏change事件，并把事件信息转换为字符串。
