javascript可以使用Element.requestFullscreen()实现全屏也可以通过模拟F11快捷键实现全屏。Element.requestFullscreen()方法用于 异步请求使得Element(该元素)全屏显示。
JavaScript实现全屏显示：
HTML代码：
全屏显示
div {
width: 200px;
height:200px;
background:pink;
margin:100px auto;
}
button {
margin-left: 650px;
}
h1 {
margin-left: 400px;
}
js控制页面的全屏展示和退出全屏显示
全屏
1、使用Element.requestFullscreen()实现全屏：
var btn = document.getElementById("btn");
btn.onclick = function() {
var width = window.screen.width;
var height = window.screen.height;
var elem = document.getElementById("div1");
requestFullScreen(elem);
}
function requestFullScreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
}
//FireFox
else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
}
//Chrome等
else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
//IE11
else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
};
2、JavaScript通过模拟F11快捷键实现全屏：
window.onload =function(){
document.getElementById("btn").onclick = function(){
var elem =document.getElementById("div1");
requestFullScreen(elem);
}
var requestFullScreen=function(element) {
//某个元素有请求
var requestMethod =element.requestFullScreen
||element.webkitRequestFullScreen //谷歌
||element.mozRequestFullScreen //火狐
||element.msRequestFullScreen; //IE11
if (requestMethod) {
requestMethod.call(element); //执行这个请求的方法
} else if (typeof window.ActiveXObject !== "undefined") {
//window.ActiveXObject判断是否支持ActiveX控件
//这里其实就是模拟了按下键盘的F11，使浏览器全屏
var wscript = new ActiveXObject("WScript.Shell"); //创建ActiveX
if (wscript !== null) { //创建成功
wscript.SendKeys("{F11}");//触发f11
}
}
}
}
Element.requestFullscreen()
1. Element.requestFullscreen()方法用于 异步请求使得Element(该元素)全屏显示。
Element.requestFullscreen()不能保证该元素被设置为全屏模式，如果允许该元素进入全屏模式，document将接受到fullscreenchange event事件；如果不允许，则document将接受fullscreenerror event事件。
2. 注意：
在调用Element.requestFullScreen()前，可建立 fullscreenchange和fullscreenerror 的事件处理，将方便调试是否成功请求全屏模式。
3. 浏览器的兼容性
chrome(谷歌浏览器、android浏览器)webkitRequestFullScreen()
firefox(火狐浏览器)mozRequestFullScreen()
Firefox 44 前的浏览器不允许在或内的元素请求全屏；
在Firefox 44+,允许在顶层document(即body)内的元素或者内的元素设置 allowfullScreen属性，则允许请求全屏显示；
IEmsRequestFullScreen()
OperaoRequestFullScreen()
