思源网 / 学习笔记 / JS实现全屏和点击按钮退出全屏写法分享
网赚项目 空余时间 每天收入几百元 QQ群:982382061【广告】

JS实现全屏和点击按钮退出全屏写法分享

【摘要】 本代码是分享JS实现全屏和点击按钮退出全屏写法分享 一个按钮实现点击全屏,再点击退出全屏,并支持F11按键 html代码 <butto......

本代码是分享JS实现全屏和点击按钮退出全屏写法分享

一个按钮实现点击全屏,再点击退出全屏,并支持F11按键

html代码

<button id="bt" onclick="toggleFullScreen(event)">点我全屏</button>
JS代码
 document.onkeydown=function(e){
        e = e|| window.event || arguments.callee.caller.arguments[0];
        if(e && e.keyCode==122){
            document.getElementById('bt').onclick();
            e.preventDefault();
            e.stopPropagation();
        }
    }
    function FullScreen(el) {
        var isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
        if (!isFullscreen) {//进入全屏,多重短路表达式
            (document.body.requestFullscreen && document.body.requestFullscreen()) ||
            (document.body.mozRequestFullScreen && document.body.mozRequestFullScreen()) ||
            (document.body.webkitRequestFullscreen && document.body.webkitRequestFullscreen()) ||
            (document.body.msRequestFullscreen && document.body.msRequestFullscreen());
 
        } else {	//退出全屏,三目运算符
            document.exitFullscreen ? document.exitFullscreen() :
                document.mozCancelFullScreen ? document.mozCancelFullScreen() :
                    document.webkitExitFullscreen ? document.webkitExitFullscreen() : '';
        }
    }
    function toggleFullScreen(e) {
        var el = e.srcElement || e.target;//target兼容Firefox
        FullScreen(el);
    }

本文标签: JS实例 代码分享 JS代码
版权声明:《 JS实现全屏和点击按钮退出全屏写法分享 》为作者 思源哥哥原创文章,转载请注明原文地址!
免责声明:思源资源网提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。如有侵权请邮件(y#isiyuan.net)与我们联系处理。
本文地址:https://www.isiyuan.net/xxbj/11312.html
分享到:
打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

评论 (0)