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

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

当前回答

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

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

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

2009-07-14 12:56:29

其他回答

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

        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

创建函数

function toggleFullScreen() {

            if ((document.fullScreenElement && document.fullScreenElement !== null) ||
                    (!document.mozFullScreen && !document.webkitIsFullScreen)) {
             $scope.topMenuData.showSmall = true;
                if (document.documentElement.requestFullScreen) {
                    document.documentElement.requestFullScreen();
                } else if (document.documentElement.mozRequestFullScreen) {
                    document.documentElement.mozRequestFullScreen();
                } else if (document.documentElement.webkitRequestFullScreen) {
                    document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
                }
            } else {

                  $scope.topMenuData.showSmall = false;
                if (document.cancelFullScreen) {
                    document.cancelFullScreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                }
            }
        }

在Html中放代码像

<ul class="unstyled-list fg-white">

            <li class="place-right" data-ng-if="!topMenuData.showSmall" data-ng-click="toggleFullScreen()">Full Screen</li>
            <li class="place-right" data-ng-if="topMenuData.showSmall" data-ng-click="toggleFullScreen()">Back</li>
        </ul>

2016-08-19 07:30:38

 <!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

在Firefox 10中，你可以使用以下javascript使当前页面全屏(没有窗口chrome的真正全屏):

window.fullScreen = true;

2012-02-11 00:45:34

新的html5技术-全屏API给了我们一个简单的方法以全屏模式显示网页内容。我们即将付出全屏模式的详细信息。试着想象一下你可以利用它得到的所有可能的好处技术-全屏相册，视频，甚至游戏。

但在我们描述这项新技术之前，我必须指出，这项技术是实验性的，所有主流浏览器都支持它。

你可以在这里找到完整的教程:http://www.css-jquery-design.com/2013/11/javascript-jquery-fullscreen-browser-window-html5-technology/

这里是工作演示:http://demo.web3designs.com/javascript-jquery-fullscreen-browser-window-html5-technology.htm

2015-02-18 16:53:21

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

推荐文章

最新文章

标签