Cách làm cho cửa sổ toàn màn hình bằng Javascript (trải dài trên toàn màn hình)

Làm cách nào tôi có thể làm cho trình duyệt của khách truy cập toàn màn hình bằng JavaScript, theo cách hoạt động với IE, Firefox và Opera?

Đây là gần như bạn có thể đến toàn màn hình trong 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> 

Trong các trình duyệt mới hơn như Chrome 15, Firefox 10, Safari 5.1, IE 10, điều này là có thể. Cũng có thể cho các IE cũ hơn thông qua ActiveX tùy thuộc vào cài đặt trình duyệt của họ.

Đây là cách thực hiện:

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

Người dùng rõ ràng cần phải chấp nhận yêu cầu toàn màn hình trước và không thể tự động kích hoạt yêu cầu này khi tải trang, nó cần được kích hoạt bởi người dùng (ví dụ: một nút)

Đọc thêm: https://developer.mozilla.org/en/DOM/Using_full-screen_mode

Mã này cũng bao gồm cách bật toàn màn hình cho Internet Explorer 9 và có thể là các phiên bản cũ hơn, cũng như các phiên bản Google Chrome gần đây. Câu trả lời được chấp nhận cũng có thể được sử dụng cho các trình duyệt khác.

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

Nguồn:

• API toàn màn hình Chrome (tuy nhiên, lưu ý rằng requestFullscreen"chỉ hoạt động trong thời gian" "[m] xương UIEvents và MouseEvents, chẳng hạn như nhấp và nhấn phím, v.v.", "vì vậy nó không thể được sử dụng độc hại".)
• Cách tạo trình duyệt toàn màn hình bằng sự kiện phím F11 thông qua JavaScript

Đây là một giải pháp hoàn chỉnh để vào và ra khỏi chế độ toàn màn hình (còn gọi là hủy, thoát, thoát)

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

Bạn có thể sử dụng API toàn màn hình Bạn có thể xem một ví dụ ở đây

API toàn màn hình cung cấp một cách dễ dàng cho nội dung web được trình bày bằng toàn bộ màn hình của người dùng. Bài viết này cung cấp thông tin về việc sử dụng API này.

Công nghệ html5 mới - API toàn màn hình cho chúng ta một cách dễ dàng để trình bày nội dung trang web ở chế độ toàn màn hình. Chúng tôi sắp cung cấp cho bạn thông tin chi tiết về chế độ toàn màn hình. Chỉ cần cố gắng tưởng tượng về tất cả các lợi thế có thể có mà bạn có thể có được bằng cách sử dụng công nghệ này - album ảnh toàn màn hình, video và thậm chí cả các trò chơi.

Nhưng trước khi chúng tôi mô tả công nghệ mới này, tôi phải lưu ý rằng công nghệ này là thử nghiệm và được hỗ trợ bởi tất cả các Trình duyệt chính .

Bạn có thể tìm thấy hướng dẫn đầy đủ ở đây: http://www.css-jquery-design.com/2013/11/javascript-jquery-fullscreen-browser-window-html5-t Technology /

Đây là bản demo đang hoạt động: http://demo.web3designs.com/javascript-jquery-fullscreen-browser-window-html5-t Technology.htmlm

Tôi đã sử dụng ...

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

Ví dụ đơn giản từ: http://www.longtailvideo.com/blog/26517/USE-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>

Tạo chức năng

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

Trong Html Đặt mã như

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

Bây giờ các API toàn màn hình đã phổ biến rộng rãi hơn và dường như đang hoàn thiện, tại sao bạn không thử dùng Screenfull.js ? Tôi đã sử dụng nó lần đầu tiên vào ngày hôm qua và hôm nay ứng dụng của chúng tôi thực sự toàn màn hình trong (gần như) tất cả các trình duyệt!

Hãy chắc chắn ghép nó với lớp :fullscreengiả trong CSS. Xem https://www.sitepoint.com/use-html5-full-screen-api/ để biết thêm.

May mắn thay cho người dùng web không nghi ngờ điều này không thể được thực hiện chỉ với javascript. Bạn sẽ cần phải viết các plugin cụ thể cho trình duyệt, nếu chúng chưa tồn tại và sau đó bằng cách nào đó sẽ khiến mọi người tải xuống chúng. Gần nhất bạn có thể nhận được là một cửa sổ tối đa hóa không có công cụ hoặc thanh điều hướng nhưng người dùng vẫn có thể thấy url.

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

Điều này thường được coi là thực hành xấu mặc dù nó loại bỏ rất nhiều chức năng trình duyệt khỏi người dùng.

Hãy thử screenfull.js . Đây cũng là một giải pháp đa trình duyệt đẹp, phù hợp với trình duyệt Opera.

Trình bao bọc đơn giản để sử dụng nhiều trình duyệt API API toàn màn hình, cho phép bạn đưa trang hoặc bất kỳ thành phần nào vào toàn màn hình. Làm dịu đi sự khác biệt khi thực hiện trình duyệt, do đó bạn không cần phải làm vậy.

Bản demo .

Điều này có thể hỗ trợ

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

Bạn có thể thử:

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

Hãy thử kịch bản này

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

Để gọi từ tập lệnh, hãy sử dụng mã này,

window.fullScreen('fullscreen.jsp');

hoặc với siêu liên kết sử dụng này

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

Trong Firefox 10, bạn có thể làm cho trang hiện tại ở chế độ toàn màn hình (toàn màn hình thực không có cửa sổ chrome) bằng cách sử dụng javascript này:

window.fullScreen = true;

Điều này sẽ hoạt động để hiển thị cửa sổ của bạn trong toàn màn hình

Lưu ý: Để làm việc này, bạn cần Truy vấn từ http://code.jquery.com/jquery-2.1.1.min.js

Hoặc thực hiện có liên kết javascript như thế này.

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

Cách hỏi và đáp toàn màn hình, nếu bạn ở trong tình huống "kiosk", là đưa F11 vào cửa sổ trình duyệt sau khi nó hoạt động. Điều này không khởi động tốt và người dùng có thể chọc màn hình cảm ứng ở phía trên và có chế độ xem toàn màn hình, nhưng cho F11 có thể thực hiện trong một nhúm hoặc chỉ để bắt đầu một dự án.

Đây là giải pháp đầy đủ của tôi cho Full Screenvà Exit Full Screencả hai (rất cám ơn sự giúp đỡ từ câu trả lời của tháp ở trên):

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

});

// GỌI:

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