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

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

当前回答

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

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

演示。

2019-05-30 09:24:33

其他回答

简单的例子:http://www.longtailvideo.com/blog/26517/using-the-browsers-new-html5-fullscreen-capabilities/

<script type="text/javascript">
  function goFullscreen(id) {
    // Get the element that we want to take into fullscreen mode
    var element = document.getElementById(id);

    // These function will not exist in the browsers that don't support fullscreen mode yet, 
    // so we'll have to check to see if they're available before calling them.

    if (element.mozRequestFullScreen) {
      // This is how to go into fullscren mode in Firefox
      // Note the "moz" prefix, which is short for Mozilla.
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullScreen) {
      // This is how to go into fullscreen mode in Chrome and Safari
      // Both of those browsers are based on the Webkit project, hence the same prefix.
      element.webkitRequestFullScreen();
   }
   // Hooray, now we're in fullscreen mode!
  }
</script>

<img class="video_player" src="image.jpg" id="player"></img>
<button onclick="goFullscreen('player'); return false">Click Me To Go Fullscreen! (For real)</button>

2013-02-28 12:59:38

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

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

2012-11-08 18:02:05

函数f () {plr.requestFullscreen (); document.exitFullscreen ()};plr.requestFullscreen():document.exitFullscreen()}

<!DOCTYPE html><html><head>

<style>
body{background:#000}
#plr{position:relative;background:#fff;width:360px}
#vd{width:100%;background:grey}
button{width:48px;height:48px;border:0;background:grey}
</style>

</head><body>

<div id="plr">
<video id="vd" src="video.mp4"></video>
<button onclick="(plr.offsetWidth==360)?plr.requestFullscreen():document.exitFullscreen()">fs</button>
<button onclick="plr.requestFullscreen();document.exitFullscreen()">fs2</button>
</div>

</body></html>

2021-04-25 23:00:14

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

        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

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

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

演示。

2019-05-30 09:24:33

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

推荐文章

最新文章

标签