本文介绍了如何使用JavaScript模拟F11全屏功能，分别针对W3C标准、Firefox、Chrome和其他IE11浏览器提供了相应的全屏和退出全屏的方法。同时，还展示了全屏状态变化的事件监听和在全屏状态下改变页面背景色的样式设置。
全屏
var docElm = document.documentElement;
//W3C
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
//FireFox
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
//Chrome等
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
//IE11
else if ($.browser.msie) { // IE
// var WshShell = new ActiveXObject('WScript.Shell')
// WshShell.SendKeys('{F11}');
//WshShell.SendKeys('{F11}');}点击全屏 备注:A、只在IE下有效； B、需要先调整IE的安全级别(打开IE - Internet 选项 - Internet 自定义级别 对没有标记为安全的ActiveX控件进行初始化和脚本运行)；
}
退出全屏
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
事件监听
document.addEventListener("fullscreenchange", function () {
fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";}, false);
document.addEventListener("mozfullscreenchange", function () {
fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";}, false);
document.addEventListener("webkitfullscreenchange", function () {
fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";}, false);
document.addEventListener("msfullscreenchange", function () {
fullscreenState.innerHTML = (document.msFullscreenElement)? "" : "not ";}, false);
在浏览器全屏的使用我们还可以进行样式设置
html:-moz-full-screen {
background: red;
}
html:-webkit-full-screen {
background: red;
}
html:fullscreen {
background: red;
}
3770
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
