最简单实用的一种办法：
var element=document.getElementById("fullScreen");
element.style.width="100%";
// 判断各种浏览器，找到正确的方法
var requestMethod =element.requestFullScreen || //W3C
element.webkitRequestFullScreen || //Chrome等
element.mozRequestFullScreen || //FireFox
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}");
}
}
监听退出全屏的事件（默认退出全屏的方法是ESC退出键）：
if (window.addEventListener) {
document.addEventListener('fullscreenchange',function(){
var isFullscreen = document.fullscreenEnabled ||
window.fullScreen ||
document.mozFullscreenEnabled ||
document.webkitIsFullScreen;
if(!isFullscreen){
var element=document.getElementById("fourView");
element.style.width="62%";
//执行的方法
}
});
document.addEventListener('webkitfullscreenchange',function(){
var isFullscreen = document.fullscreenEnabled ||
window.fullScreen ||
document.mozFullscreenEnabled ||
document.webkitIsFullScreen;
if(!isFullscreen){
//执行的方法
}
});
document.addEventListener('mozfullscreenchange',function(){
var isFullscreen = document.fullscreenEnabled ||
window.fullScreen ||
document.mozFullscreenEnabled ||
document.webkitIsFullScreen;
if(!isFullscreen){
//执行的方法
}
});
document.addEventListener('MSFullscreenChange',function(){
var isFullscreen = document.fullscreenEnabled ||
window.fullScreen ||
document.mozFullscreenEnabled ||
document.webkitIsFullScreen;
if(!isFullscreen){
//执行的方法
}
});
}
判断当前是否有全屏的元素：
var isFullscreen = document.fullscreenEnabled ||
window.fullScreen ||
document.mozFullscreenEnabled ||
document.webkitIsFullScreen ||
document.msFullscreenElement;
值得注意的是，IE11的情况比较特殊，它是只能返回当前被全屏的元素，而不能判断当前是否有元素全屏，所以我们只能通过判断是否有元素的方式来确认是否全屏。
退出全屏的方法：
var el = document;
me.isFullScreen=false;
var cfs =el.cancelFullScreen ||el.webkitCancelFullScreen ||
el.mozCancelFullScreen ||el.exitFullScreen ||el.msExitFullscreen;
if (cfs) {//typeof cfs != "undefined" && cfs
cfs.call(el);
}else if (typeof window.ActiveXObject !="undefined") {
//for IE，这里和fullScreen相同，模拟按下F11键退出全屏
var wscript =new ActiveXObject("WScript.Shell");
if (wscript !=null) {
wscript.SendKeys("{F11}");
}
};
目前关于网上很多设置IE11的方法都是错误的，需要特别注意。有些是大小写的问题，有些是方法名更改过了，这里直接贴出微软的api文档，方便大家查阅。
https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/dev-guides/dn265028(v=vs.85)
