在web系统中实现按钮控制浏览器全屏。
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8"%>
<html>
<head>
<meta charset="utf-8">
<title>全屏事件</title>
<script src="http://www.jqueryfuns.com/Content/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
//处理全屏兼容浏览器问题
function fullScreen(el) {
//支持谷歌等其它浏览器
var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,
wscript;
if(typeof rfs != "undefined" && rfs) {
rfs.call(el);
return;
}
//支持IE
if(typeof window.ActiveXObject != "undefined") {
wscript = new ActiveXObject("WScript.Shell");
if(wscript) {
wscript.SendKeys("{F11}");
}
}
}
//退出全屏
function exitFullScreen(el) {
var el= document,
cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen,
wscript;
if (typeof cfs != "undefined" && cfs) {
cfs.call(el);
return;
}
if (typeof window.ActiveXObject != "undefined") {
wscript = new ActiveXObject("WScript.Shell");
if (wscript != null) {
wscript.SendKeys("{F11}");
}
}
}
</script>
<style type="text/css">
/* html,body{
100%;
height: 100%;
} */
</style>
</head>
<body>
<button id='btn'>全屏按钮</button>
<div id="content" style="background:yellow;100%;height:100%;">sljfsdlfj
<div id="quite" class="btn">退出全屏</div>
</div>
</body>
<script type="text/javascript">
//触发事件
window.onload = function(){
var btn = document.getElementById('btn');
var content = document.getElementById('content');
btn.onclick = function(){
fullScreen(content);
}
var quite = document.getElementById('quite');
quite.onclick = function(){
exitFullScreen();
}
}
</script>
</html>