如何使用Javascript使窗口全屏(伸展整个屏幕)

如何使用JavaScript使访问者的浏览器全屏显示，同时兼容IE、Firefox和Opera?

当前回答

这个函数非常好用

function toggle_full_screen()
{
    if ((document.fullScreenElement && document.fullScreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen))
    {
        if (document.documentElement.requestFullScreen){
            document.documentElement.requestFullScreen();
        }
        else if (document.documentElement.mozRequestFullScreen){ /* Firefox */
            document.documentElement.mozRequestFullScreen();
        }
        else if (document.documentElement.webkitRequestFullScreen){   /* Chrome, Safari & Opera */
            document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
        }
        else if (document.msRequestFullscreen){ /* IE/Edge */
            document.documentElement.msRequestFullscreen();
        }
    }
    else
    {
        if (document.cancelFullScreen){
            document.cancelFullScreen();
        }
        else if (document.mozCancelFullScreen){ /* Firefox */
            document.mozCancelFullScreen();
        }
        else if (document.webkitCancelFullScreen){   /* Chrome, Safari and Opera */
            document.webkitCancelFullScreen();
        }
        else if (document.msExitFullscreen){ /* IE/Edge */
            document.msExitFullscreen();
        }
    }
}

要使用它，只需调用:

toggle_full_screen();

2021-01-28 19:28:09

其他回答

screenfull.js试试。这是一个很好的跨浏览器解决方案，应该也适用于Opera浏览器。

JavaScript全屏API跨浏览器使用的简单包装器，它允许您将页面或任何元素显示为全屏。消除了浏览器实现的差异，所以您不必这样做。

演示。

2019-05-30 09:24:33

这里有一个完整的解决方案，以进入和退出全屏模式(即取消，退出，退出)

        function cancelFullScreen() {
            var el = document;
            var requestMethod = el.cancelFullScreen||el.webkitCancelFullScreen||el.mozCancelFullScreen||el.exitFullscreen||el.webkitExitFullscreen;
            if (requestMethod) { // cancel full screen.
                requestMethod.call(el);
            } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript !== null) {
                    wscript.SendKeys("{F11}");
                }
            }
        }

        function requestFullScreen(el) {
            // Supports most browsers and their versions.
            var requestMethod = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;

            if (requestMethod) { // Native full screen.
                requestMethod.call(el);
            } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript !== null) {
                    wscript.SendKeys("{F11}");
                }
            }
            return false
        }

        function toggleFullScreen(el) {
            if (!el) {
                el = document.body; // Make the body go full screen.
            }
            var isInFullScreen = (document.fullScreenElement && document.fullScreenElement !== null) ||  (document.mozFullScreen || document.webkitIsFullScreen);

            if (isInFullScreen) {
                cancelFullScreen();
            } else {
                requestFullScreen(el);
            }
            return false;
        }

2012-08-05 22:46:36

幸运的是，对于毫无戒心的网络用户来说，这不能用javascript完成。你需要编写特定于浏览器的插件，如果它们还不存在的话，然后以某种方式让人们下载它们。你能得到的最接近的是一个最大化的窗口，没有工具或导航栏，但用户仍然能够看到url。

窗口.open(“http://www.wege.com”，“标题”，“类型”=fullWindow, fullscreen, scrollbars=yes);“>

这通常被认为是不好的做法，因为它从用户那里删除了很多浏览器功能。

2009-07-14 12:56:29

 <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
    
    <h2>Fullscreen with JavaScript</h2>
    <p>Click on the button to open the video in fullscreen mode.</p>
    <button onclick="openFullscreen();">Open Video in Fullscreen Mode</button>
    <p><strong>Tip:</strong> Press the "Esc" key to exit full screen.</p>
    
    <video width="100%" controls id="myvideo">
      <source src="rain.mp4" type="video/mp4">
      <source src="rain.ogg" type="video/ogg">
      Your browser does not support the video tag.
    </video>
    
    
    <script>
    var elem = document.getElementById("myvideo");
    function openFullscreen() {
      if (elem.requestFullscreen) {
        elem.requestFullscreen();
      } else if (elem.webkitRequestFullscreen) { /* Safari */
        elem.webkitRequestFullscreen();
      } else if (elem.msRequestFullscreen) { /* IE11 */
        elem.msRequestFullscreen();
      }
    }
    </script>
    
    <p>Note: Internet Explorer 10 and earlier versions do not support the msRequestFullscreen() method.</p>
    
    </body>
    </html>

来源:https://www.w3schools.com/howto/howto_js_fullscreen.asp

2021-06-22 13:27:56

如果你是在一个“售货亭”的情况下，一个进入全屏的Q&D方法是在浏览器窗口启动并运行后输入一个F11。这不是一个很好的开始，用户可能可以在顶部戳一个触摸屏，获得半全屏的视图，但在紧急情况下，或者只是为了开始一个项目，可以使用F11。

2012-04-19 07:59:46

如何使用Javascript使窗口全屏(伸展整个屏幕)

推荐文章

最新文章

标签