Fatal编程技术网
  • javascript/
  • 如何使用Javascript使窗口全屏显示（在屏幕上伸展）

如何使用Javascript使窗口全屏显示（在屏幕上伸展）

javascript

如何使用Javascript使窗口全屏显示（在屏幕上伸展）,javascript,fullscreen,Javascript,Fullscreen,如何使用JavaScript使访问者的浏览器全屏显示，并与IE、Firefox和Opera配合使用？这是JavaScript全屏显示的最佳选择： <script type="text/javascript"> window.onload = maxWindow; function maxWindow() { window.moveTo(0, 0); if (document.all) { top.window

如何使用JavaScript使访问者的浏览器全屏显示，并与IE、Firefox和Opera配合使用？

这是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> 


window.onload=maxWindow；
函数maxWindow（）{
window.moveTo（0,0）；
如果（全部文件）{
top.window.resizeTo（screen.availWidth，screen.availHeight）；
}
else if（document.layers | | document.getElementById）{
if（top.window.outerHeight
幸运的是，对于毫无戒心的web用户来说，仅使用javascript是无法做到这一点的。如果浏览器还不存在的话，你需要编写特定于浏览器的插件，然后让人们下载它们。你能得到的最接近的是一个最大化的窗口，没有工具或导航栏，但用户仍然能够看到url

window.open（“”，'title'，'type=fullWindow，fullscreen，scrollbars=yes'）；">

这通常被认为是不好的做法，因为它会删除用户的许多浏览器功能。

这可能支持

<%@ 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>


无标题页
函数max（）
{
window.open（“，”_self“，”全屏=是，滚动条=自动“）；
}
这是测试页面
我用过这个

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


功能全屏（URL）{
打开（URL，，'全屏=是，滚动条=自动'）；
}
//结束-->
全屏打开
在较新的浏览器中，如Chrome 15、Firefox 10、Safari 5.1、IE 10，这是可能的。对于较旧的IE，也可以通过ActiveX，这取决于它们的浏览器设置

以下是如何做到这一点：

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

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

var elem = document.body; // Make the body go full screen.
requestFullScreen(elem);
用户显然需要首先接受全屏请求，并且不可能在页面加载时自动触发该请求，它需要由用户触发（例如按钮）

阅读更多信息：

此代码还包括如何为Internet Explorer 9或更早版本启用全屏， 以及谷歌Chrome的最新版本。公认的答案也可用于其他浏览器

var el = document.documentElement
    , rfs = // for newer Webkit and Firefox
           el.requestFullscreen
        || el.webkitRequestFullScreen
        || el.mozRequestFullScreen
        || el.msRequestFullscreen
;
if(typeof rfs!="undefined" && rfs){
  rfs.call(el);
} else if(typeof window.ActiveXObject!="undefined"){
  // for Internet Explorer
  var wscript = new ActiveXObject("WScript.Shell");
  if (wscript!=null) {
     wscript.SendKeys("{F11}");
  }
}
资料来源：

  • （但请注意 
    requestFullscreen
    “仅在”[m]ost UIEvents和MouseeEvents（如单击和按下键等）期间工作，“因此不能恶意使用它”。）
试试这个脚本

<script language="JavaScript">
function fullScreen(theURL) {
window.open(theURL, '', 'fullscreen=yes, scrollbars=auto' );
}
</script>
或与超链接一起使用此

<a href="javascript:void(0);" onclick="fullScreen('fullscreen.jsp');"> 
Open in Full Screen Window</a>
在Firefox 10中，您可以使用以下javascript使当前页面全屏显示（真正的全屏显示，没有窗口浏览器）：

window.fullScreen = true;
如果你在一个“信息亭”里，一个全屏幕的Q&D方式“情况是，在F11启动并运行后，将其送入浏览器窗口。这不是一个很好的启动，用户可能可以在顶部插入触摸屏并获得半全屏视图，但在紧要关头或只是为了开始一个项目，给F11馈电可能就行了。

这里有一个进入和退出全屏模式（又称取消、退出、退出）的完整解决方案

你可以用 你可以看到

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

以下是一个简单的例子：


功能全屏（id）{
//获取我们想要进入全屏模式的元素
var元素=document.getElementById（id）；
//这些功能在不支持全屏模式的浏览器中不存在，
//所以在给他们打电话之前，我们必须检查一下他们是否有空。
if（element.mozRequestFullScreen）{
//这就是如何在Firefox中进入fullscren模式
//注意“moz”前缀，它是Mozilla的缩写。
元素。mozRequestFullScreen（）；
}else if（element.webkitRequestFullScreen）{
//这就是如何在Chrome和Safari中进入全屏模式
//这两种浏览器都基于Webkit项目，因此前缀相同。
元素。webkitRequestFullScreen（）；
}
//万岁，现在我们进入全屏模式！
}
点击我去全屏！（真实的）
新的html5技术–全屏API为我们提供了一种简单的 以全屏模式显示网页内容。我们就要放弃了 您可以查看有关全屏模式的详细信息。试着 想象一下使用此工具可以获得的所有可能优势 技术–全屏相册、视频甚至游戏

但是在我们描述这项新技术之前，我必须注意到这项技术是实验性的，并且受到所有主流浏览器的支持

您可以在这里找到完整的教程：

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

<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>
这里是工作演示：

创建函数

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

<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>
在Html中放入类似的代码

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

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

    

  • 
返回
    •
既然全屏API越来越普及，而且似乎越来越成熟，为什么不试试呢？昨天我第一次使用它，今天我们的应用程序在（几乎）所有浏览器中都能真正全屏显示

请确保将它与CSS中的
：全屏
伪类相结合。有关更多信息，请参阅。
以下是我对
全屏
和
退出全屏
的完整解决方案（非常感谢tower上面的回答）：

//
呼叫：
<input type="button" value="Full Screen" onclick="$.toggleFS(this);" />



<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

   <div id="demo-element">
        <span>Full Screen Mode Disabled</span>
        <button id="go-button">Enable Full Screen</button>
    </div>
    <script>
    function GoInFullscreen(element) {
        if(element.requestFullscreen)
            element.requestFullscreen();
        else if(element.mozRequestFullScreen)
            element.mozRequestFullScreen();
        else if(element.webkitRequestFullscreen)
            element.webkitRequestFullscreen();
        else if(element.msRequestFullscreen)
            element.msRequestFullscreen();
    }

    function GoOutFullscreen() {
        if(document.exitFullscreen)
            document.exitFullscreen();
        else if(document.mozCancelFullScreen)
            document.mozCancelFullScreen();
        else if(document.webkitExitFullscreen)
            document.webkitExitFullscreen();
        else if(document.msExitFullscreen)
            document.msExitFullscreen();
    }

    function IsFullScreenCurrently() {
        var full_screen_element = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || null;

        if(full_screen_element === null)
            return false;
        else
            return true;
    }

    $("#go-button").on('click', function() {
        if(IsFullScreenCurrently())
            GoOutFullscreen();
        else
            GoInFullscreen($("#demo-element").get(0));
    });

    $(document).on('fullscreenchange webkitfullscreenchange mozfullscreenchange MSFullscreenChange', function() {
        if(IsFullScreenCurrently()) {
            $("#demo-element span").text('Full Screen Mode Enabled');
            $("#go-button").text('Disable Full Screen');
        }
        else {
            $("#demo-element span").text('Full Screen Mode Disabled');
            $("#go-button").text('Enable Full Screen');
        }
    });</script>



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



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