如何使用Javascript使窗口全屏（在屏幕上伸展）-Java 学习之路

229

如何使用JavaScript以一种适用于IE，Firefox和Opera的方式使访问者的浏览器全屏显示？

16 回答

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

回复于 2024-05-09T14:49:43+08:00

在较新的浏览器中，例如Chrome 15，Firefox 10，Safari 5.1，IE 10，这是可能的 . 根据浏览器的设置，通过ActiveX也可以使用旧版IE .

这是怎么做的：

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

用户显然需要首先接受全屏请求，并且不可能在页面加载时自动触发，它需要由用户触发（例如，按钮）

回复于 2024-05-09T14:49:43+08:00

0
此代码还包括如何为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}");
  }
}
```
资料来源：
- Chrome Fullscreen API（但请注意， requestFullScreen "only works during" "[m]ost UIEvents and MouseEvents, such as click and keydown, etc."，"so it cannot be used maliciously" . ）
- How to make browser full screen using F11 key event through JavaScript
回复于 2024-05-09T14:49:43+08:00

这是进入和退出全屏模式的完整解决方案（也就是取消，退出，退出）

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

回复于 2024-05-09T14:49:43+08:00

19

你可以使用The fullscreen API你可以看到an example here

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

回复于 2024-05-09T14:49:43+08:00
51

全新的html5技术 - 全屏API为我们提供了一种以全屏模式呈现网页内容的简便方法 . 我们即将为您提供有关全屏模式的详细信息 . 试着想象一下使用这项技术可以获得的所有优势 - 全屏相册，视频甚至游戏 .

但在我们描述这项新技术之前，我必须注意到这项技术是实验性的，而且是 supported by all major Browsers .

You can find the full tutorial here : http://www.css-jquery-design.com/2013/11/javascript-jquery-fullscreen-browser-window-html5-technology/

Here is working Demo : http://demo.web3designs.com/javascript-jquery-fullscreen-browser-window-html5-technology.htm

回复于 2024-05-09T14:49:43+08:00

我用过这个......

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

回复于 2024-05-09T14:49:43+08:00

简单示例来自：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>

回复于 2024-05-09T14:49:43+08:00

258

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>

回复于 2024-05-09T14:49:43+08:00

5

现在全屏API更广泛并且看起来越来越成熟，为什么不尝试Screenfull.js？我昨天第一次使用它，今天我们的应用程序真正全屏（几乎）所有浏览器！

一定要将它与CSS中的 :fullscreen 伪类耦合 . 有关更多信息，请参阅https://www.sitepoint.com/use-html5-full-screen-api/ .

回复于 2024-05-09T14:49:43+08:00
1

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

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

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

回复于 2024-05-09T14:49:43+08:00

这可能会支持

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

回复于 2024-05-09T14:49:43+08:00

试试这个脚本

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

回复于 2024-05-09T14:49:43+08:00

2
在Firefox 10中，您可以使用此javascript使当前页面全屏显示（实际全屏，没有窗口镶边）：
```
window.fullScreen = true;
```
回复于 2024-05-09T14:49:43+08:00
8

如果您处于“自助服务终端”状态，全屏显示的Q＆D方式是在启动并运行后将F11提供给浏览器窗口 . 这不是很好的启动，用户可能能够在顶部触摸触摸屏并获得半全屏视图，但是喂F11可能会在紧要关头或只是为了开始项目 .

回复于 2024-05-09T14:49:43+08:00

这是我对 Full Screen 和 Exit 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);" />

回复于 2024-05-09T14:49:43+08:00

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

16 回答

相关问题