js点击按钮模拟F11完成打开和关闭全屏功能& 使用js模拟键盘调用事件

最新推荐文章于 2023-12-28 16:24:15 发布

jcat_李小黑

最新推荐文章于 2023-12-28 16:24:15 发布

阅读量7.5k

点赞数 6

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_43216105/article/details/108408853

版权

本文介绍了如何使用JavaScript实现点击按钮模拟F11键进行全屏及关闭全屏操作，并提供了js模拟键盘事件的方法。文章包含具体代码示例及DEMO源码，适合需要此类功能的开发者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、打开全屏

function fullScreen() {
   
    var el = document.documentElement;
    var rfs = el.requestFullScreen || el.webkitRequestFullScreen ||
        el.mozRequestFullScreen || el.msRequestFullScreen;
    if (typeof rfs != "undefined" && rfs) {
   
        rfs.call(el);
    } else if (typeof window.ActiveXObject != "undefined") {
   
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
   
            wscript.SendKeys("{F11}");
        }
    }
}

二、关闭全屏

function exitFullScreen(el) {
   
    var el = document
    var cfs = el.cancelFullScreen || el.mozCancelFullScreen || el.msExitFullscreen || el.webkitExitFullscreen ||
        el.exitFullscreen,
        wscript
    if (cfs) {
   
        cfs.call(el);
        return;
    } else if (typeof window.ActiveXObject !== "undefined") {
   
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
   
            wscript.SendKeys("{F11}");
        }
    } else {
   
        alert('浏览器不支持全屏API或已被禁用')
    }
}

以上两个方法中的关闭全屏是需要配合fullScreen方法使用，而在使用F11打开后，这个exitFullScreen方法并不能关闭全部屏幕！

调用

<button id="openBtnEsc">打开全屏</button>
 <button id="btnEsc">退出</button>
<script>
document.getElementById('openBtnEsc').onclick = function (

最低0.47元/天解锁文章

js点击按钮模拟F11完成打开和关闭全屏功能& 使用js模拟键盘调用事件

目录

一、打开全屏

二、关闭全屏