274

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

4

22 回答 22

307

在 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

于 2011-09-23T07:40:34.923 回答
67

此代码还包括如何为 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}");
  }
}

资料来源:

于 2011-11-01T12:35:36.933 回答
55

这是尽可能接近 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> 
于 2009-07-14T12:41:37.797 回答
31

这是进入和退出全屏模式(又名取消、退出、退出)的完整解决方案

        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-05T22:46:36.713 回答
16

您可以使用全屏 API 您可以在此处查看示例

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

于 2012-11-08T18:02:05.043 回答
11
于 2015-02-18T16:53:21.827 回答
9

我用过这个...

<!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>
于 2010-04-08T14:37:50.097 回答
9

简单示例来自: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-28T12:59:38.950 回答
7

创建函数

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 Put 代码中

<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-19T07:30:38.293 回答
6

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

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

演示

于 2019-05-30T09:24:33.793 回答
4

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

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

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

于 2009-07-14T12:56:29.253 回答
4

既然全屏 API 更加普遍并且似乎正在成熟,为什么不试试Screenfull.js呢?我昨天第一次使用它,今天我们的应用程序在(几乎)所有浏览器中真正全屏!

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

于 2016-09-07T10:15:23.780 回答
3

这个功能就像一个魅力

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();
于 2021-01-28T19:28:09.783 回答
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>
于 2009-11-13T12:45:34.500 回答
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>

于 2018-12-27T12:43:31.083 回答
2

这将用于全屏显示您的窗口

注意: 为此,您需要从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>
于 2019-01-27T13:31:43.477 回答
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>
于 2011-12-16T07:18:18.420 回答
1

在 Firefox 10 中,您可以使用以下 javascript 使当前页面变为全屏(没有窗口镶边的真正全屏):

window.fullScreen = true;
于 2012-02-11T00:45:34.197 回答
0

如果您处于“信息亭”的情况下,全屏的问答方式是在浏览器窗口启动并运行后将 F11 输入到浏览器窗口。这不是很好的启动,用户可能能够在顶部戳触摸屏并获得半全屏视图,但是喂 F11 可能会在紧要关头或只是为了开始一个项目。

于 2012-04-19T07:59:46.767 回答
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);" />
于 2018-02-02T01:52:26.900 回答
-1

function fs(){plr.requestFullscreen();document.exitFullscreen()};或者function fs(){(plr.offsetWidth==360)?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-25T23:00:14.327 回答
-1
 <!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-22T13:27:56.720 回答