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


当前回答

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

        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;
        }

其他回答

既然全屏api越来越广泛,而且似乎越来越成熟,为什么不试试Screenfull.js呢?我昨天第一次使用它,今天我们的应用程序在(几乎)所有浏览器中真正全屏!

确保它与CSS中的:fullscreen伪类相结合。详见https://www.sitepoint.com/use-html5-full-screen-api/。

这是JavaScript中最接近全屏的效果:

<script type="text/javascript">
    window.onload = maxWindow;

    function maxWindow() {
        window.moveTo(0, 0);

        if (document.all) {
            top.window.resizeTo(screen.availWidth, screen.availHeight);
        }

        else if (document.layers || document.getElementById) {
            if (top.window.outerHeight < screen.availHeight || top.window.outerWidth < screen.availWidth) {
                top.window.outerHeight = screen.availHeight;
                top.window.outerWidth = screen.availWidth;
            }
        }
    }
</script> 

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

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

演示。

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

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

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

您可以使用全屏API 你可以在这里看到一个例子

全屏API为web内容提供了一种简单的方式 使用用户的整个屏幕呈现。本文提供了 有关使用此API的信息。