现在的位置: 首页 -> 前端学习 -> JS前端 -> js全屏和退出全屏代码范例

js全屏和退出全屏代码范例

2016-09-06 23:16评论数 3 ⁄ 被浏览 20677 views+

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


这个demo基本是够了,直接复制下面的源码另存为html文件看效果吧。


<!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>


 

文章出自:https://www.daixiaorui.com/read/225.html 本站所有文章,除注明出处外皆为原创,转载请注明本文地址,版权所有。

目前有 3 条评论  @我要评论

  1. 3楼好听的名字 : 2022-07-03 15:34:55 评论说: @回复

    王者荣耀刷点券http://oodakedo.com/ 王者荣耀名字https://n012.cn

  2. 2楼Rice : 2018-08-23 14:39:04 评论说: @回复

    博主,你这个全屏js在IE上不行啊

  3. 1楼擦擦擦 : 2016-11-09 14:39:53 评论说: @回复

    博主200买你网站源码

您的每一个评论都是对我的一份支持

 博客二维码

昵称 *

邮箱 *