加载时全屏

Question

我的问题很简单：有没有一种简单的方法可以在您第一次进入网页时以全屏模式（例如按 F11 时）加载网页？ （无需按 F11 或特定按钮即可全屏）

这是用于我使用 HTML/CSS 制作的演示文稿（如 powerpoint 演示文稿）（我的客户想要一些比常规 powerpoint 内容更“动态”的东西），因此没有“违规”或用户体验问题，因为它赢得了'不在线，仅用于代表大会和内部会议。

提前致谢！

Answer 1

最近我也遇到了这个问题。

对于 Chrome、Mozilla 等最新版本的浏览器，您可以使用 webkit uhttps://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

但问题在于 i.e 和 safari。就像不支持这个完整的 scrren api 一样，在 safari 中，您不能在全屏模式下进行用户键输入（当您询问用户要访问的幻灯片时，请考虑这种情况）。在代码应该有帮助。

如果是 js 做类似的事情

function requestFullScreen(image1) {
    var image = document.getElementById(image1);

    image.style.width=(0.70*screen.width)+'px';
    image.style.height=(0.96*screen.height)+'px';

     // Get the element that we want to take into fullscreen mode
        var element = parent.document.getElementById('imageFullScreen');
       if(element.requestFullScreen) {
          element.requestFullScreen();
       } else if (element.mozRequestFullScreen) {
          // This is how to go into fullscren mode in Firefox
          element.mozRequestFullScreen();
        } else if (element.webkitRequestFullScreen) {
          // This is how to go into fullscreen mode in Chrome and Safari
          element.webkitRequestFullScreen();
       }else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
        document.getElementById('imageFullScreen').style.width="100%";
        document.getElementById('imageFullScreen').style.height="100%";
        image.style.height=(0.96*$(window).height())+"px";
        document.getElementById('showFullScreen').style.display='none';
        document.getElementById('cancelFullScreen').style.display='inline';
        document.getElementById("ieCheck").value="true";
       }
}



//to close full screen manually
function cancelFullscreen() {
    if(document.cancelFullScreen) {
      document.cancelFullScreen();
    } else if(document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if(document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    } else if (typeof window.ActiveXObject !== "undefined"){
    IEtoggleSmallScreen();
    }

}


//listners to change at full screen and small screen

document.addEventListener("fullscreenchange", function () {
    if(document.fullScreen){
         document.getElementById('showFullScreen').style.display='none';
         document.getElementById('cancelFullScreen').style.display='inline';
     }else{
         document.getElementById('showFullScreen').style.display='inline';
         document.getElementById('cancelFullScreen').style.display='none';
     }
});



document.addEventListener("mozfullscreenchange", function () {
    if(document.mozFullScreen){
         document.getElementById('showFullScreen').style.display='none';
         document.getElementById('cancelFullScreen').style.display='inline';
     }else{
         document.getElementById('showFullScreen').style.display='inline';
         document.getElementById('cancelFullScreen').style.display='none';
     }
});

document.addEventListener("webkitfullscreenchange", function () {
 if(document.webkitIsFullScreen){
     document.getElementById('showFullScreen').style.display='none';
     document.getElementById('cancelFullScreen').style.display='inline';
 }else{
     document.getElementById('showFullScreen').style.display='inline';
     document.getElementById('cancelFullScreen').style.display='none';
 }

});

//to change screen size in i.e
function IEtoggleSmallScreen(){
    document.getElementById('showFullScreen').style.display='inline';
    document.getElementById('cancelFullScreen').style.display='none';
    document.getElementById('imageFullScreen').style.width=638+"px";
    document.getElementById('imageFullScreen').style.height=479+"px";
}

// toc check esc functuonlaity for ie
$(document).keyup(function(e) {
    if (e.keyCode == 27) { 
    var check = document.getElementById("ieCheck");
    if(check.value=="true"){
        IEtoggleSmallScreen();
        check.value="false";
    }
    }  
  });

现在为 html 做喜欢

<div id="imageFullScreen" class="imageFullScreen" style="width: 700px;height:400px;background-color:blue; center;text-align: center;" > 
<img  id="image" src="<%=imageUrl%>=1" style="max-height: 96%;max-width: 100%;width: 100%;height: 100%">

<div id="btnCentre" style="text-align: center;">
<input type="hidden" id="ieCheck" value="false">
<input type="button" value="Full Screen"  onclick="requestFullScreen('image');" id="showFullScreen" style="max-height: 4%">
<input type="button" value="Cancel Screen"  onclick="cancelFullscreen();" id="cancelFullScreen" style="display: none;" style="max-height: 4%"> 
</div>
</div>