jquery全屏及退出全屏

涉及方法:

  • requestFullScreen:请求全屏
  • exitFullscreen:退出全屏
  • cancelFullScreen:取消全屏
  • fullscreenchange:监听全屏变化

html

  • clipboard.pngclipboard.png

    js

    // 全屏
    var $fullScreenEle = $('#js_full_screen'),
        $fsChildEle = $fullScreenEle.children(),
        $navbarEle = $('.zh-navbar'),
        $headerEle = $('.zh-header');
    $fullScreenEle.click(function() {
        if($fsChildEle.hasClass('iconfont-full-screen')) { // 全屏
            var docEle = document.documentElement;
            var rfs = docEle.requestFullScreen || docEle.webkitRequestFullScreen || docEle.mozRequestFullScreen || docEle.msRequestFullScreen;
            if (rfs) {
                rfs.call(docEle);
            } else if (typeof window.ActiveXObject !== "undefined") {
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript != null) {
                    wscript.SendKeys("{F11}");
                }
            }
            $fsChildEle.removeClass('iconfont-full-screen').addClass('iconfont-exit-screen');
            $navbarEle.hide();
            $headerEle.css('top', 10);
        } else { // 退出全屏
            var cfs = document.cancelFullScreen || document.webkitCancelFullScreen || document.mozCancelFullScreen || document.exitFullScreen;
            if (cfs) {
                cfs.call(document);
            } else if (typeof window.ActiveXObject !== "undefined") {
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript != null) {
                    wscript.SendKeys("{F11}");
                }
            }
        }
    });
    
    // 通过resize事件监听退出全屏
    $(window).resize(function() {
        var prevWinHgt = window.sessionStorage.getItem('winHgt');
        if(prevWinHgt) {
            if(window.innerHeight

    也可通过fullscreenchange来监控全屏变化

    document.addEventListener("fullscreenchange", function(e) {
        console.log("fullscreenchange", e);
    });
    document.addEventListener("mozfullscreenchange", function(e) {
        console.log("mozfullscreenchange ", e);
    });
    document.addEventListener("webkitfullscreenchange", function(e) {
        console.log("webkitfullscreenchange", e);
    });
    document.addEventListener("msfullscreenchange", function(e) {
        console.log("msfullscreenchange", e);
    });

    你可能感兴趣的:(javascript,shell)