今天有個小功能要寫,就是利用 JS 代碼來實現瀏覽器的全屏模式與退出瀏覽器全屏模式,自己網上也收集過一些相關的代碼,分享出來,供大家參考一下。

js 實現瀏覽器全屏與退出全屏幕的方法

js函數代碼:

<script>
//瀏覽器全屏
function fullScreen() {
    var el = document.documentElement;
    var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;
    if (rfs) {
        rfs.call(el);
    } else if (typeof window.ActiveXObject !== "undefined") {
        //IE瀏覽器,模擬按下F11全屏
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
            wscript.SendKeys("{F11}");
        }
    }
}
//瀏覽器退出全屏
function exitScreen() {
    var el = document;
    var cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen;
    if (cfs) {
        cfs.call(el);
    } else if (typeof window.ActiveXObject !== "undefined") {
        //IE瀏覽器,模擬按下F11鍵退出全屏
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
            wscript.SendKeys("{F11}");
        }
    }
}
</script>

注意:

国产视频app上面的函數必須要以 html 點擊事件來觸發,不能直接調用函數,否則會報以下的錯誤

国产视频appFailed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture

大概的意思是:函數不能直接調用,要使用事件來觸發。

函數事件調用方法:

html 代碼:

<button onclick="fullScreen()">全屏</button>
<button onclick="exitScreen()">退出全屏</button>

js之切換全屏和退出全屏實現代碼實例

国产视频app如果你感覺上面例子中的代碼,有些難懂,可以使用下這個示例中的代碼,比較好理解,實現的效果是一樣的。

js代碼:

<script>
//瀏覽器全屏
function fullScreen() {
    var docElm = document.documentElement;
   //W3C
    if (docElm.requestFullscreen) {
        docElm.requestFullscreen();
    }
    //FireFox
    else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen();
    }
    //Chrome等
    else if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen();
    }
    //IE11
    else if (docElm.msRequestFullscreen) {
        document.body.msRequestFullscreen();
    }
}
//瀏覽器退出全屏
function exitScreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    }
    else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }
    else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    }
    else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    } else {
        window.parent.showTopBottom();
    }
}
</script>

調用方法:

<button onclick="fullScreen()">全屏</button>
<button onclick="exitScreen()">退出全屏</button>

關于全屏與退出全屏,各個瀏覽器的事件操作

操作瀏覽器代碼
全屏W3Cde.requestFullscreen()
全屏CHROMEde.webkitRequestFullScreen()
全屏FIREFOXde.mozRequestFullScreen()
全屏IEde.msRequestFullscreen()



還原W3Cdocument.exitFullscreen()
還原CHROMEdocument.webkitCancelFullScreen()
還原FIREFOXdocument.mozCancelFullScreen()
還原IEdocument.msExitFullscreen()