JS html 实现全屏

旧城等待， 2022-06-02 00:42 438阅读 0赞

首先,根据如下警告信息,可以看出,无法自动实现全屏功能,必须要手动才可以.

> Failed to execute ‘requestFullscreen’ on ‘Element’: API can only be initiated by a user gesture.

所以要实现全屏你可以通过点击一个 button 控件，或是整个 document 添加一个click 事件,通过点击来手动实现全屏。当然，监听键盘事件也是可以的，实现类似于F11的功能。

我这里的例子是通过监听 document.click 事件来实现整个页面的全屏，需要实现某个页面元素的全屏，可以在网上找找，例子很多。

window.onclick = document.onclick = function (e) { 
        var el = document.documentElement;
        //这里的 el 可以是其他的页面元素，这样实现的就是这个元素的全屏，而不是整个页面的全屏
        fullScreen(el);
    }
    function fullScreen(el) { 
        var rfs = el.requestFullScreen || el.webkitRequestFullScreen ||
    
            el.mozRequestFullScreen || el.msRequestFullScreen;
    
        if(typeof rfs != "undefined" && rfs) {
    
            rfs.call(el);
    
        } else if(typeof window.ActiveXObject != "undefined") {
    
            //for IE，这里其实就是模拟了按下键盘的F11，使浏览器全屏
    
            var wscript = new ActiveXObject("WScript.Shell");
    
            if(wscript != null) {
    
                wscript.SendKeys("{F11}");
    
            }
    
        }
    }

通过如下方式，想要实现自动全屏，但不行，提示必须手动的警告信息：

> Failed to execute ‘requestFullscreen’ on ‘Element’: API can only be initiated by a user gesture.

setTimeout(function() { 
        // IE
        if(document.all) {
            document.click();
        }
        // 其它浏览器
        else {
            var e = document.createEvent("MouseEvents");
            e.initEvent("click", true, true);
            document.dispatchEvent(e);
        }
    }, 1000);

判断当前页面是不是全屏的。

/*最好先将页面设置成无滚动(可选)*/
    html { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; height: 100%; overflow: hidden; overflow-x: hidden; overflow-y: hidden; }

function checkFull() { 
        //使用html5中的API判断是否全屏(返回当前全屏的元素)
        var FullEl = document.fullscreenElement    ||
            document.msFullscreenElement  ||
            document.mozFullScreenElement ||
            document.webkitFullscreenElement;
    
        //若是不支持Html5中的API，可以使用以最原始的判断方式，但需要将页面的滚动条去掉
        if (FullEl === null) {
            return isFullscreenForNoScroll();
        }
    
        return true;
    }
    /** * 支持无滚动条的页面以 Fullscreen api启动的全屏 或是 按f11启动的全屏 * 不支持有滚动条的页面 * @returns {boolean} */
    function isFullscreenForNoScroll(){ 
        var explorer = window.navigator.userAgent.toLowerCase();
        if(explorer.indexOf('chrome')>0){
       //webkit
            if (document.body.scrollHeight === window.screen.height && document.body.scrollWidth === window.screen.width) {
                console.log("全屏");
                return true;
            } else {
                console.log("不全屏");
                return false;
            }
        }else{
       //IE 9+ fireFox
            if (window.outerHeight === window.screen.height && window.outerWidth === window.screen.width) {
                console.log("全屏");
                return true;
            } else {
                console.log("不全屏");
                return false;
            }
        }
    }

在全屏模式下，按 ESC 或是 F11，会执行系统默认的操作，退出全屏，这个是没有方式可以避免的。但我们可以在退出全屏后，实现自己的操作。

function afterExitFull () { 
        var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;
        //若是支持html5的API
        if (typeof rfs != "undefined" && rfs) {
            window.onkeydown = document.onkeydown = function (e) { 
                var e = event || window.event || arguments.callee.caller.arguments[0];
                if(e && e.keyCode == 122){
       //捕捉F11键盘动作
                    e.preventDefault();  //阻止不了F11默认动作
                    e.stopPropagation();
    
                    //监听不同浏览器的全屏事件，并件执行相应的代码
                    document.addEventListener("webkitfullscreenchange", function(evt) { //
                        if (document.webkitIsFullScreen) {
                            //全屏后要执行的代码
                        }else{
                            //退出全屏后执行的代码
                        }
                    }, false);
    
                    document.addEventListener("fullscreenchange", function(evt) { 
                        if (document.fullscreen) {
                            //全屏后执行的代码
                        }else{
                            //退出全屏后要执行的代码
                        }
                    }, false);
    
                    document.addEventListener("mozfullscreenchange", function(evt) { 
                        if (document.mozFullScreen) {
                            //全屏后要执行的代码
                        }else{
                            //退出全屏后要执行的代码
                        }
                    }, false);
    
                    document.addEventListener("msfullscreenchange", function(evt) { 
                        if (document.msFullscreenElement) {
                            //全屏后要执行的代码
                        }else{
                            //退出全屏后要执行的代码
                        }
                    }, false)
                }
            }
        //否则，使用原始的方法
        } else {
            window.onresize = function(e) { 
                if (checkFull()) {
                    //退出全屏后要执行的代码
                } else {
                    //全屏后要执行的代码
                }
            };
        }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，438人围观）

还没有评论，来说两句吧...

相关阅读

相关 js实现全屏和退出全屏功能

主要是全屏和退出全屏事件，以及相应的操作（采用window.onresize监测） $(function(){ //全屏 $("fu

迈不过友情╰/ 2023年06月14日 04:23/ 0 赞/ 37 阅读

相关 JavaScript require.js实现全屏和退出全屏效果

目录全屏和退出全屏浏览器全屏API 语法示例 API规格浏览器兼容性参阅 -------------------- 全屏和退出全屏引入

Love The Way You Lie/ 2023年06月06日 10:51/ 0 赞/ 65 阅读

相关 js - 全屏/取消全屏

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

深碍√TFBOYSˉ_/ 2022年11月25日 05:23/ 0 赞/ 291 阅读

相关 js实现一个全屏和退出全屏的功能

$(function(){ //全屏 function fullScreen(){ var el = doc

妖狐艹你老母/ 2022年09月10日 00:12/ 0 赞/ 303 阅读

相关 JS html 实现全屏

首先,根据如下警告信息,可以看出,无法自动实现全屏功能,必须要手动才可以. > Failed to execute ‘requestFullscreen’ on ‘Eleme

旧城等待，/ 2022年06月02日 00:42/ 0 赞/ 439 阅读

相关 js 实现各浏览器全屏

现代浏览器包括ie11，可以直接用h5的全屏api实现低版本的IE需要通过ActiveX插件实现； //直接上代码 <!DOCTYPE html> <

深碍√TFBOYSˉ_/ 2022年05月31日 00:45/ 0 赞/ 267 阅读

相关 js实现页面全屏

//该方法要有点击事件触发才能实现全屏效果 function launchFullScreen(element) { / 处理全屏/

比眉伴天荒/ 2022年04月08日 08:47/ 0 赞/ 363 阅读

相关 html js让元素全屏和取消全屏显示

先获取到元素节点，然后设置全屏即可，这里我是用vue获取的，videoDom就是dom节点，用原生js获取的也是一样的 let videoDom = this.$

痛定思痛。/ 2022年02月26日 11:44/ 0 赞/ 701 阅读

相关原生js实现浏览器全屏和退出全屏

全屏模式 //W3C if (docElm.requestFullscreen) { docElm.requestFullscreen(

爱被打了一巴掌/ 2021年12月24日 19:41/ 0 赞/ 422 阅读

相关 HTML5--浏览器全屏操作、退出全屏、是否全屏

[HTML5--浏览器全屏操作、退出全屏、是否全屏][HTML5--] <!DOCTYPE html> <html lang="en"> <he

爱被打了一巴掌/ 2021年10月23日 14:12/ 0 赞/ 803 阅读