键盘控制网页全屏-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_30104281/article/details/80291292

本文介绍了一种使用键盘按键（W/S）来控制网页或特定元素进入和退出全屏模式的方法，并提供了兼容不同浏览器的全屏API实现。

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

                document.onkeydown=function(event){
			    if(event.keyCode==87){    //w
                   // launchFullScreen(document.documentElement); // 整个网页
                    launchFullscreen(document.getElementById("bncanvas")); // 某个页面元素
				}else if(event.keyCode==83){ //s
                    // 退出全屏模式!
                    exitFullscreen();
				}
			};
            //判断各种浏览器，找到正确的方法  全屏
            function launchFullscreen(element) {
                if(element.requestFullscreen) {
                    element.requestFullscreen();
                } else if(element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
                } else if(element.webkitRequestFullscreen) {
                    element.webkitRequestFullscreen();
                } else if(element.msRequestFullscreen) {
                    element.msRequestFullscreen();
                }
            }

            // 判断浏览器种类  取消全屏
            function exitFullscreen() {
                if(document.exitFullscreen) {
                    document.exitFullscreen();
                } else if(document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if(document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                }
            }

参考链接 https://www.jianshu.com/p/b6a93b52d13f

浏览器的全屏显示