How to make the window full screen with Javascript (stretching all over the screen)

后端 未结 19 1802
天涯浪人
天涯浪人 2020-11-21 22:13

How can I make a visitor\'s browser go fullscreen using JavaScript, in a way that works with IE, Firefox and Opera?

相关标签:
19条回答
  • 2020-11-21 22:52

    This may support

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="PRODUCTION_Default5" %>
    
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
        <html xmlns="http://www.w3.org/1999/xhtml" >
        <head runat="server">
            <title>Untitled Page</title>
            <script type="text/javascript">
                function max()
                {
                   window.open("", "_self", "fullscreen=yes, scrollbars=auto"); 
                }
            </script>
        </head>
        <body onload="max()">
            <form id="form1" runat="server">
            <div>
            This is Test Page
            </div>
            </form>
        </body>
        </html>
    
    0 讨论(0)
  • 2020-11-21 22:54

    You can use The fullscreen API You can see an example here

    The fullscreen API provides an easy way for web content to be presented using the user's entire screen. This article provides information about using this API.

    0 讨论(0)
  • 2020-11-21 22:55

    Can you Try:

    <script type="text/javascript">
        function go_full_screen(){
          var elem = document.documentElement;
          if (elem.requestFullscreen) {
            elem.requestFullscreen();
          } else if (elem.msRequestFullscreen) {
            elem.msRequestFullscreen();
          } else if (elem.mozRequestFullScreen) {
            elem.mozRequestFullScreen();
          } else if (elem.webkitRequestFullscreen) {
            elem.webkitRequestFullscreen();
          }
        }
    </script>
    
    <a href="#" onClick="go_full_screen();">Full Screen / Compress Screen</a>

    0 讨论(0)
  • 2020-11-21 22:55

    Try this script

    <script language="JavaScript">
    function fullScreen(theURL) {
    window.open(theURL, '', 'fullscreen=yes, scrollbars=auto' );
    }
    </script>
    

    For calling from script use this code,

    window.fullScreen('fullscreen.jsp');
    

    or with hyperlink use this

    <a href="javascript:void(0);" onclick="fullScreen('fullscreen.jsp');"> 
    Open in Full Screen Window</a>
    
    0 讨论(0)
  • 2020-11-21 22:56

    I've used this...

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    
    <head>
        <script language="JavaScript">
            function fullScreen(theURL) {
                window.open(theURL, '', 'fullscreen=yes, scrollbars=auto');
            }
            // End -->
        </script>
    </head>
    
    <body>
        <h1 style="text-align: center;">
            Open In Full Screen
        </h1>
        <div style="text-align: center;"><br>
            <a href="javascript:void(0);" onclick="fullScreen('http://google.com');">
                Open Full Screen Window
            </a>
        </div>
    </body>
    
    </html>
    
    0 讨论(0)
  • 2020-11-21 22:57

    Create Function

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

    In Html Put Code like

    <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>
    
    0 讨论(0)
提交回复
热议问题