如何使用Javascript使窗口全屏显示(在整个屏幕上展开)


253

如何以与IE,Firefox和Opera兼容的方式使用JavaScript使访问者的浏览器全屏显示?


29
它的内部应用,而不是面向公众。我不会滥用任何人
user63898

2
您可以实用地向用户询问:sprintf('Dear user, the best experience with this site is in fullscreen mode. To view this site full screen, press %s.', _get_browsers_full_Screen_key())
Boldewyn

6
我很好奇youtube全屏的工作原理。有人知道答案吗?
卡斯特里

6
这是由Flash Player而非浏览器完成的
user63898 2010年

5
有关最新技术的概述,请参见
6

Answers:


54

这与您使用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> 

查看链接haim evgi中的链接/接受的答案...您不应能够调整浏览器的大小。但是,您可以在浏览器窗口中最大化显示(我的阅读方式)
lexu

4
取决于“选项”中的javascript权限设置。您可以在窗口功能上切换js控制。
garrow

3
上次发生这种情况的原因是某个网站使用了这样的代码,但我没有阻止它:dorward.me.uk/tmp/fullscreen.jpeg
Quentin

2
看一看webkit-fullscreen API:出血边缘-tlv.appspot.com/#28(摘自#gdd2011)
Christian Kuetbach 2012年

17
这是旧的。寻找下面的解决方案!
Keavon 2014年

281

在较新的浏览器中,例如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);

显然,用户显然需要首先接受全屏请求,并且无法在页面加载时自动触发此请求,它需要由用户(例如按钮)触发

了解更多:https//developer.mozilla.org/en/DOM/Using_full-screen_mode


3
目前在Chrome 15,Firefox 10和Safari 5.1中可用。有关当前游戏状态的详细信息,请参见此hacks.mozilla.org博客文章
Simon Lieschke '02

10
太棒了,退出全屏模式吗?
Christopher Chase

2
一些东西。在IE中,这显然将忽略元素并全屏显示所有内容。如果确实要全屏显示,则所有传入的内容都document.documentElement将确保您获得正确的根元素(“ html”或“ body”)。使用可以将cancelFullscreen()其关闭(或再次向IE发送“ F11”)。
Matthew Wilcoxson

6
它只能由用户触发(例如,通过全屏按钮)。载入期间无法自动全屏显示。
A. KR 2014年

3
IE的拼写错误应为msRequestFullScreen,如文档msdn.microsoft.com/en-us/library/ie/dn265028(v=vs.85).aspx中所述
DanielB 2014年

66

此代码还包括如何为Internet Explorer 9(可能是较旧的版本)以及最新版本的Google 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}");
  }
}

资料来源:


适用于IE 8以上版本,FF10以上版本(在FF 9中尝试过,它不起作用),并在Chrome 18上进行了测试
Treby

@Peter O.“应该放置在事件处理程序中”,以任何方式触发它加载?
弗朗西斯·P

@FrancisP:不;“ load”和“ DOMContentLoaded”都不是全屏API的适用UIEvent或MouseEvent。
Peter O.

2
感谢“((但是,请注意,requestFullScreen“仅在”“ [大多数] UIEvents和MouseEvent,例如单击和按下按键等期间工作,”所以“不能被恶意使用”。)”

是的documentElement,比body我好。
马特

24

这是进入和退出全屏模式(即取消,退出,转义)的完整解决方案

        function cancelFullScreen(el) {
            var requestMethod = el.cancelFullScreen||el.webkitCancelFullScreen||el.mozCancelFullScreen||el.exitFullscreen;
            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 toggleFull() {
            var elem = document.body; // Make the body go full screen.
            var isInFullScreen = (document.fullScreenElement && document.fullScreenElement !== null) ||  (document.mozFullScreen || document.webkitIsFullScreen);

            if (isInFullScreen) {
                cancelFullScreen(document);
            } else {
                requestFullScreen(elem);
            }
            return false;
        }

1
msIsFullScreen
kangax 2014年

1
规格已更改。webkitCancelFullScreen现在webkitExitFullscreengeneratedcontent.org/post/70347573294/...
道格小号

此逻辑和操作的第一部分是多余的,应删除document.fullScreenElement && document.fullScreenElement !== null
consideRatio 2015年

改变elemtoggleFull()document.bodydocument.documentElement到修复左,右页边距问题
Firnas


8

全新的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


1
@Ian它正在IE Edge中工作。较旧版本的IE不支持此功能。
Dhiraj

8

我已经用过了...

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

window.open(theURL,'','fullscreen = yes','scrollbars = auto'); 这条线上有一个parens问题
Kevin Bowersox

那是从父母那里来的。当窗口已经打开时没有帮助。
基督教徒

7

来自以下示例的简单示例: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>

6

创建功能

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>

在IE 11中,if语句似乎无法在全屏模式下检测到该语句(因此不会关闭)。
伊恩(Ian)

3

现在,全屏API越来越普及并且日趋成熟,为什么不尝试Screenfull.js呢?昨天我第一次使用它,今天我们的应用程序在(几乎)所有浏览器中都变为全屏显示!

确保将其与:fullscreenCSS中的伪类耦合。有关更多信息,请参见https://www.sitepoint.com/use-html5-full-screen-api/


很棒的小脚本。现在可以在我的网站www.StarCommanderOnline.com上使用它。谢谢!
安迪

3

幸运的是,对于毫无戒心的Web用户,这不能仅使用javascript来完成。如果尚不存在特定于浏览器的插件,则需要编写它们,然后以某种方式让人们下载它们。您可以得到的最接近的是没有工具或导航栏的最大化窗口,但用户仍然可以看到该URL。

window.open('http://www.web-page.com', 'title' , 'type=fullWindow, fullscreen, scrollbars=yes');">

尽管这会删除用户的许多浏览器功能,但通常认为这是不好的做法。


3

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

用于JavaScript全屏API的跨浏览器使用的简单包装,使您可以将页面或任何元素置于全屏状态。消除浏览器实现上的差异,因此您不必这样做。

演示


2

这可能支持

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

2

你能试一下吗:

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


在Ubuntu 76上的Chrome 76中似乎对我来说失败了
乔纳森

1

试试这个脚本

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

要从脚本调用,请使用以下代码,

window.fullScreen('fullscreen.jsp');

或与超链接一起使用

<a href="javascript:void(0);" onclick="fullScreen('fullscreen.jsp');"> 
Open in Full Screen Window</a>

1

在Firefox 10中,您可以使用以下JavaScript将当前页面设置为全屏显示(没有窗口镶边的全屏显示):

window.fullScreen = true;

1
术语“应该”在软件中是如此重载。在某些浏览器中,它是只读的。Firefox 10允许您进行设置。
Leopd 2012年

1

这样可以全屏显示窗口

注意: 要使此方法起作用,您需要从http://code.jquery.com/jquery-2.1.1.min.js进行查询

或者使像这样的javascript链接。

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

0

如果您处于“信息亭”状态,则进入全屏的Q&D方式是在启动并运行F11后将F11馈入浏览器窗口。这并不是一个很好的启动方式,用户也许可以在顶部拨动触摸屏并获得半全屏视图,但是提供F11可能只是紧要关头,或者仅仅是开始一个项目。


0

这里是我的完整的解决方案Full ScreenExit Full Screen两个(非常感谢帮助从塔的回答以上):

$(document).ready(function(){
$.is_fs = false;
$.requestFullScreen = function(calr)
{
    var element = document.body;

    // 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}");
        }
    }

    $.is_fs = true;    
    $(calr).val('Exit Full Screen');
}

$.cancel_fs = function(calr)
{
    var element = document; //and NOT document.body!!
    var requestMethod = element.exitFullScreen || element.mozCancelFullScreen || element.webkitExitFullScreen || element.mozExitFullScreen || element.msExitFullScreen || element.webkitCancelFullScreen;

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

    $(calr).val('Full Screen');    
    $.is_fs = false;
}

$.toggleFS = function(calr)
{    
    $.is_fs == true? $.cancel_fs(calr):$.requestFullScreen(calr);
}

});

//通话:

<input type="button" value="Full Screen" onclick="$.toggleFS(this);" />
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.