JS控制网页全屏
在谷歌,IE等浏览器中,点击F11按键会进入网页全屏模式,如同看电影的剧场模式,这个在代码中可以通过JS来实现,简单说下在实现这个需求后的个人总结:
底层网页是已经加载完毕的,这时我们需要的全屏其实就是对底层网页的放大处理,所以采用这种方式来做成全屏效果,你的前提是有底层的网页dom,然后对这个dom进行全屏处理。
代码:
<body>
<button id='btn'>进入全屏</button>
<!-- 对这个div 进行全屏处理
一开始对全屏处理的dom进行隐藏(display: none;),不隐藏也是可以的,看个人需求
-->
<div id="content" style="background:#333;width:100%;height:100%;display: none;">
<div id="quite" class="btn"><span style="color:#FFF">退出全屏</span></div>
</div>
</body>
<script type="text/javascript">
var content = document.getElementById('content');
$("#btn").click(function(){
//全屏处理前,将隐藏dom秀出来
$("#content").show();
fullScreen(content);
});
var quite = document.getElementById('quite');
$("#quite").click(function(){
exitFullScreen();
//隐藏dom
$("#content").hide();
});
//进入全屏
function fullScreen(el) {
var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,
wscript;
if(typeof rfs != "undefined" && rfs) { ////////
rfs.call(el);
return;
}
if(typeof window.ActiveXObject != "undefined") {
wscript = new ActiveXObject("WScript.Shell");
if(wscript) {
wscript.SendKeys("{F11}");
}
}
}
//退出全屏
function exitFullScreen() {
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>
文章不足之处,望提出,谢谢..