在 HTML5 中, W3C 制定了關於全屏的 API，就可以實現全屏幕的效果，全屏目前只有 google chrome 15 +, safri5.1+,firfox10+,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 (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
退出全屏：
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;
}
項目代碼實例：
fullScreen(event) {
var viewFullScreen = event.target;
if (event.target.parentNode.style.width = '50%') {
var docElm = event.target.parentNode;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
else if (docElm.msRequestFullscreen) {
docElm.msRequestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
} else {
alert("當前瀏覽器不支持全屏化操作！");
}
return false;
}
else if (event.target.parentNode.style.width = '100%') {
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else {
alert("當前瀏覽器不支持全屏化操作！");
}
return false;
}
},
監聽全屏事件
document.addEventListener("fullscreenchange", function (event) {
if (document.fullscreen === false ){
event.target.style.width='50%'
}else{
event.target.style.width='100%'
}
}, false);
document.addEventListener("msfullscreenchange", function (event) {
if (document.msFullscreenElement === false ){
event.target.style.width='50%'
}else{
event.target.style.width='100%'
}
}, false);
document.addEventListener("mozfullscreenchange", function (event) {
if (document.mozFullScreen === false ){
event.target.style.width='50%'
}else{
event.target.style.width='100%'
}
}, false);
document.addEventListener("webkitfullscreenchange", function (event) {
if (document.webkitIsFullScreen === false ){
console.log(event.target)
event.target.style.width='50%'
}else{
event.target.style.width='100%'
}
}, false);