实现浏览器全屏(兼容各种浏览器)

最新推荐文章于 2019-05-06 14:47:12 发布

qinghechaoge

最新推荐文章于 2019-05-06 14:47:12 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/qinghechaoge/article/details/37821587

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>全屏测试</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                if (screen.height == $(window).height() || screen.height - 1 == $(window).height()) {
                    exitFullscreen();
                } else {
                    fullscreen();
                }
            });
            $(window).resize(function () {
                if (screen.height == $(window).height() || screen.height - 1 == $(window).height()) {
                    $("#btn").val('退出全屏');
                } else {
                    $("#btn").val('全屏显示');
                }
            });
        });
        function fullscreen() {
            if ($.browser.msie) {
                try {
                    var WsShell = new ActiveXObject('WScript.Shell');
                    WsShell.SendKeys('{F11}');
                    return true;
                }
                catch (e) {
                    alert("该浏览器已禁用ActiveX控件的运行，若想继续使用此功能，请修改IE设置<br/>操作步骤:Internet选项 - 安全 - 自定义级别 - 对未标记为可安全执行脚本的ActiveX控件初始化并执行脚本    选为启用或提示(选提示安全一些)<br/>也可手动按F11实现全屏");
                    return false;
                }
            }
            var docElm = document.documentElement;
            if (docElm.requestFullscreen) {
                docElm.requestFullscreen();
                return true;
            }
            else if (docElm.mozRequestFullScreen) {
                docElm.mozRequestFullScreen();
                return true;
            }
            else if (docElm.webkitRequestFullScreen) {
                docElm.webkitRequestFullScreen();
                return true;
            }
            return false;
        };
        //退出全屏
        function exitFullscreen() {
            if ($.browser.msie) {
                try {
                    var WsShell = new ActiveXObject('WScript.Shell');
                    WsShell.SendKeys('{F11}');
                    return true;
                }
                catch (e) {
                    //alert("该浏览器已禁用ActiveX控件的运行，若想继续使用此功能，请修改IE设置(Internet - 安全将安全级别设置为低)");
                    alert("该浏览器已禁用ActiveX控件的运行，若想继续使用此功能，请修改IE设置<br/>操作步骤:Internet选项 - 安全 - 自定义级别 - 对未标记为可安全执行脚本的ActiveX控件初始化并执行脚本    选为启用或提示(选提示安全一些)<br/>也可手动按F11退出全屏");
                    return false;
                }
            }
            if (document.exitFullscreen) {
                document.exitFullscreen();
                return true;
            }
            else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
                return true;
            }
            else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
                return true;
            }
            return false;
        }
    </script>
</head>
<body>
    <div>
        <input type="button" id="btn" value="全屏显示" />
    </div>
</body>
</html>

qinghechaoge

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现浏览器全屏(兼容各种浏览器)

全屏测试 $(function () { $("#btn").click(function () { if (screen.height == $(window).height() || screen.height - 1 == $(window).height()) {
复制链接

扫一扫