js实现网页全屏和退出全屏代码范例

js实现浏览器窗口全屏和退出全屏的功能,市面上主流浏览器如:谷歌、火狐、360等都是兼容的,不过IE低版本有点瑕疵(全屏状态下仍有底部的状态栏)。

代码:

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js全屏和退出全屏代码</title>
<body>
<!-- requestFullScreen(document.documentElement): 整个网页进入全屏
 requestFullScreen(document.getElementById("video-box")): 指定某块区域全屏
 -->
<button onclick="requestFullScreen(document.documentElement)">全屏显示</button>
<button onclick="exitFull()">退出全屏</button>
</body>
<script type="text/javascript">
function requestFullScreen(element) {
 // 判断各种浏览器,找到正确的方法
 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}");
 }
 }
}
//退出全屏 判断浏览器种类
function exitFull() {
 // 判断各种浏览器,找到正确的方法
 var exitMethod = document.exitFullscreen || //W3C
 document.mozCancelFullScreen || //Chrome等
 document.webkitExitFullscreen || //FireFox
 document.webkitExitFullscreen; //IE11
 if (exitMethod) {
 exitMethod.call(document);
 }
 else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
 var wscript = new ActiveXObject("WScript.Shell");
 if (wscript !== null) {
 wscript.SendKeys("{F11}");
 }
 }
}
</script>
</html>

-END-

分享到:
赞(0)