Как сделать окно полноэкранным с помощью Javascript (растягивая по всему экрану) - PullRequest
Новая
       29

Как сделать окно полноэкранным с помощью Javascript (растягивая по всему экрану)

233 голосов
/ 14 июля 2009

Как сделать так, чтобы браузер посетителя работал в полноэкранном режиме с использованием JavaScript, таким образом, чтобы он работал с IE, Firefox и Opera?

Ответы [ 19 ]

3 голосов
/ 14 июля 2009

К счастью для ничего не подозревающих веб-пользователей, это невозможно сделать только с помощью javascript. Вам нужно будет написать специальные плагины для браузера, если они еще не существуют, а затем каким-то образом заставить людей загрузить их. Самое близкое, что вы можете получить - это развернутое окно без инструментов или панелей навигации, но пользователи все равно смогут видеть URL.

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

Это, как правило, считается плохой практикой, так как лишает пользователя многих функций браузера.

2 голосов
/ 13 ноября 2009

Это может поддерживать 

<%@ 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>
1 голос
/ 30 мая 2019

Попробуйте screenfull.js . Это хорошее кросс-браузерное решение, которое должно работать и для браузера Opera.

Простая оболочка для кросс-браузерного использования полноэкранного API JavaScript, которая позволяет вам выводить страницу или любой элемент в полноэкранный режим. Сглаживает различия в реализации браузера, поэтому вам не нужно.

Демо .

1 голос
/ 27 декабря 2018

Можете ли вы попробовать: 

<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>
1 голос
/ 11 февраля 2012

В Firefox 10 вы можете сделать текущую страницу полноэкранной (настоящей полноэкранной без оконного хрома), используя этот javascript: 

window.fullScreen = true;
1 голос
/ 16 декабря 2011

Попробуйте этот скрипт 

<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>
0 голосов
/ 27 января 2019

Это будет работать, чтобы показать ваше окно в полноэкранном режиме

Примечание: Чтобы это работало, вам нужен Query from 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 голосов
/ 02 февраля 2018

Вот мое полное решение для 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);" />
0 голосов
/ 19 апреля 2012

Q & D способ перейти в полноэкранный режим, если вы находитесь в ситуации «киоска», это ввести F11 в окно браузера после его запуска и запуска. Это не очень приятный запуск, и пользователь мог бы нажать на сенсорный экран сверху и получить полу-полноэкранный вид, но подача F11 может потребоваться в крайнем случае или просто начать работу над проектом.

Страница:
...