点击按钮如何使div进入全屏模式？

Question

我有一个div，想要在单击另一个按钮、图片或链接时使其全屏（窗口大小的100%宽度/高度）。使用Javascript/jQuery怎么做呢？

- Dxx

Answer 1

其他解决方案描述了使用HTML5全屏API来隐藏浏览器chrome，截至2020年10月已得到广泛支持。

这个jQuery将一个元素展开到视口：

$('#theButton').click(function() {
    $('#theDiv').css({
        position: 'fixed',
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
        zIndex: 999
    });
});

- Joseph Silber

---

我看到全屏 API 现在得到了很好的支持。 - krisho

退出全屏模式怎么样？ - JotaPardo

Answer 2

您可以使用以下函数使任何div全屏显示。

    function goFullScreen(){

        var elem = document.getElementById(temp);

        if(elem.requestFullscreen){
            elem.requestFullscreen();
        }
        else if(elem.mozRequestFullScreen){
            elem.mozRequestFullScreen();
        }
        else if(elem.webkitRequestFullscreen){
            elem.webkitRequestFullscreen();
        }
        else if(elem.msRequestFullscreen){
            elem.msRequestFullscreen();
        }
    }

如果要退出全屏，您可以使用以下函数

       function exitFullScreen(){

            if(document.exitFullscreen){
                document.exitFullscreen();
            }
            else if(document.mozCancelFullScreen){
                document.mozCancelFullScreen();
            }
            else if(document.webkitExitFullscreen){
                document.webkitExitFullscreen();
            }
            else if(document.msExitFullscreen){
                document.msExitFullscreen();
            }

        }

这段代码可以在任何浏览器上运行。

- Ajinkya Bodade

---

这是更好的选择。它可以创建真正的全屏！ - Esocoder

Answer 3

这样怎么样：

#HTML
<div id="some_id"></div>
<div id="button"></div>

#JS
$( '#button' ).click( function() {
    $( '#some_id' ).width( $( window ).width() );
    $( '#some_id' ).height( $( window ).height() );
});

- kgr

Answer 4

你可以使用这些函数来获取宽度和高度。

$(window).width();
$(window).height();

$(document).width();
$(document).height();

然后使用它

var w = $(document).width();
var h = $(document).height();
$("#theid").css('width',w);
$("#theid").css('height',h);

- Jose De Gouveia

Answer 5

这是我昨天回答的答案的修改版：

演示

$(':button').click(function() {
  $('div > div').css({
      position:'absolute', //or fixed depending on needs
      top: $(window).scrollTop(), // top pos based on scoll pos
      left: 0,
      height: '100%',
      width: '100%'
  });
});

- shaunsantacruz

Answer 6

你需要一个固定位置的元素，宽度和高度都设置为100%。如果没有背景颜色或图像，你将能够通过它进行点击。将z-index设置得比其他所有元素都高，以确保它在前面（如果需要）。

$('#id').css({
  position: 'fixed',
  top: 0,
  left: 0,
  width: 100%
  height: 100%,
  zIndex: 701
});

- GGJ

Answer 7

您可以使用以下函数将任何 DIV 设置为全屏显示。

    function goFullScreen(){

        var elem = document.getElementById(temp);

        if(elem.requestFullscreen){
            elem.requestFullscreen();
        }
        else if(elem.mozRequestFullScreen){
            elem.mozRequestFullScreen();
        }
        else if(elem.webkitRequestFullscreen){
            elem.webkitRequestFullscreen();
        }
        else if(elem.msRequestFullscreen){
            elem.msRequestFullscreen();
        }
    }

要退出全屏，您可以使用以下函数

       function exitFullScreen(){

            if(window.exitFullscreen){
                window.exitFullscreen();
            }
            else if(window.mozCancelFullScreen){
                window.mozCancelFullScreen();
            }
            else if(window.webkitExitFullscreen){
                window.webkitExitFullscreen();
            }
            else if(window.msExitFullscreen){
                window.msExitFullscreen();
            }
            
        }

这段代码可以在任何浏览器上运行。

在 exitFullscreen() {} 中，document 不是活动的，会输出一个错误，请将其更改为 window。

- MaZzIMo24