Question

我在所有浏览器上使用以下代码用于全屏网站。但我的代码只在mozila浏览器上工作，当我在Chrome浏览器上浏览我的网站并将其全屏显示时，它没有全屏预览，它显示我的屏幕很窄。

这是我的代码：

console.clear();
var elem = document.getElementById("fullScreen");
function requestFullScreen(elt) {
    console.log("Requesting fullscreen for", elt);
    if (elt.requestFullscreen) {
      elt.requestFullscreen();
    } else if (elt.msRequestFullscreen) {
      elt.msRequestFullscreen();
    } else if (elt.mozRequestFullScreen) {
      elt.mozRequestFullScreen();
    } else if (elt.webkitRequestFullscreen) {
      elt.webkitRequestFullscreen();
    } else {
        console.error("Fullscreen not available");
    }
}
document.getElementById("Fullscreen").addEventListener("click", function () {
    requestFullScreen( 
        document.getElementById("FullScreen") 
    );
});

如果您不明白，请在此处发表评论，我会更新我的帖子并提供更多信息。感谢

Answer 1

由于各种原因（例如拒绝许可），Chrome可能无法进入全屏状态。

您应该在致电fullscreenerror之前设置fullscreenerror和requestFullscreen个事件。通过这种方式，您可以检查条件并获取有关Chrome无法全屏输入的信息。

document.addEventListener("fullscreenerror ", function( event) {

    console.log(event);
});

Answer 2

根据您的输入，我附上了一个代码，该代码正在 Chrome＆amp;火狐即可。请参阅以下代码以便更好地理解。

console.clear();
var elem = document.getElementById("fullScreen");

function requestFullScreen(elt) {
  console.log("Requesting fullscreen for", elt);
  if (elt.requestFullscreen) {
    elt.requestFullscreen();
  } else if (elt.msRequestFullscreen) {
    elt.msRequestFullscreen();
  } else if (elt.mozRequestFullScreen) {
    elt.mozRequestFullScreen();
  } else if (elt.webkitRequestFullscreen) {
    elt.webkitRequestFullscreen();
  } else {
    console.error("Fullscreen not available");
  }
}
document.getElementById("fullScreen").addEventListener("click", function() {
  requestFullScreen(elem);
});

#fullScreen {
  width: 100%;
  min-height: 100px;
  height: 100%;
  border: 1px solid #666;
  background-color: green;
  cursor: pointer;
}

<div id="fullScreen" title="Go Fullscreen"></div>

将代码段复制到任何真实的HTML文件中并尝试检查。这可能行不通。 如果仍然存在，您会有任何疑问随时发表评论。

使用javascript的全屏网站

2 个答案: