加载时全屏

Fullscreen on load

本文关键字：加载      更新时间：2023-09-26

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

这是我使用 HTML/CSS 制作的演示文稿（如 PowerPoint 演示文稿）（我的客户想要比常规 PowerPoint 内容更"动态"的东西），因此没有"违规"或用户体验问题，因为它不会在线，只会用于大会和内部会议。

提前感谢！

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

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

但问题在于IE和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>
相关文章：