首页 > 其他分享> > js 实现全屏预览（F11功能）--转

js 实现全屏预览（F11功能）--转

2022-07-13 16:36:46 作者：互联网

参考文档 http://t.zoukankan.com/ghfjj-p-6322415.html

HTML代码

<body>
    <div id="content">
        <div>内容1</div>
        <div>内容2</div>
        <img id="btn" src="img/icon/btn_fd.png" 
             style="float:left;width:18px;height:18px"
             onclick="big()" />
    </div>
</body>

JS事件

<script type="text/javascript">
      var clickBigNumber = 1;//定义放大缩小点击次数
</script>

function big() {
    //由于只有一个按钮可操作，所以定义了clickBigNumber,
   //第一次点击，clickBigNumber==1，所以为全屏，再一次点击clickBigNumber==2且%2==0，所以退出全屏
    var content = document.getElementById('content');
    if (clickBigNumber % 2 == 0) {
        //退出全屏
        exitFullScreen(content);
    } else {
        //全屏
        fullScreen(content);
    }
    clickBigNumber++;
}

JS实现方法

//全屏
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(el) {
    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}");
        }
    }
}

标签：el,--,wscript,clickBigNumber,content,全屏,js,cfs
来源： https://www.cnblogs.com/syeacfpl/p/16474306.html