使用fullScreen API实现全屏
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>原生js实现模拟点击按钮切换全屏</title>
</head>
<body>
<div class="column_diagram">
<button class="column_fell_screen" onClick="fullScreen()">全屏显示</button>
<button class="column_fell_screen1" onClick="fullExit()">退出全屏</button>
</div>
<script>
function fullScreen() {
var element = document.documentElement; //若要全屏页面中div，var element= document.getElementById("divID");
//IE 10及以下ActiveXObject
if (window.ActiveXObject) {
var WsShell = new ActiveXObject('WScript.Shell')
WsShell.SendKeys('{F11}');
}
//HTML W3C 提议
else if (element.requestFullScreen) {
element.requestFullScreen();
}
//IE11
else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
// Webkit (works in Safari5.1 and Chrome 15)
else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
// Firefox (works in nightly)
else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
}
}
//退出全屏
function fullExit() {
var element = document.documentElement; //若要全屏页面中div，var element= document.getElementById("divID");
//IE ActiveXObject
if (window.ActiveXObject) {
var WsShell = new ActiveXObject('WScript.Shell')
WsShell.SendKeys('{F11}');
}
//HTML5 W3C 提议
else if (element.requestFullScreen) {
document.exitFullscreen();
}
//IE 11
else if (element.msRequestFullscreen) {
document.msExitFullscreen();
}
// Webkit (works in Safari5.1 and Chrome 15)
else if (element.webkitRequestFullScreen) {
document.webkitCancelFullScreen();
}
// Firefox (works in nightly)
else if (element.mozRequestFullScreen) {
document.mozCancelFullScreen();
}
}
</script>
