使用 javascript 的全屏网站答案

【问题标题】：Full screen website using javascript使用 javascript 的全屏网站
【发布时间】：2017-11-21 00:01:02
【问题描述】：

我在所有浏览器上使用下面的代码进行全屏网站。但是我的代码只能在 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") 
    );
});

如果你不明白，请在这里评论，我会更新我的帖子以提供更多信息。谢谢

【问题讨论】：

请给你看html代码

标签： javascript jquery fullscreen

【解决方案1】：

Chrome 可能由于拒绝许可等多种原因之一而无法进入全屏模式。

您应该在调用requestFullscreen 之前设置fullscreenerror 和fullscreenerror 事件。通过这种方式，您可以检查情况并获取有关 Chrome 无法进入全屏的原因的信息。

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

    console.log(event);
});

【讨论】：

【解决方案2】：

根据您的输入，我附上了正在 Chrome 和 Firefox 中测试的代码。请参考下面的代码以更好地理解。

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

&lt;div id="fullScreen" title="Go Fullscreen"&gt;&lt;/div&gt;

在任何真实的 HTML 文件中复制 sn-p 并尝试检查。在这里它可能不起作用。 如果仍有疑问，请随时发表评论。

【讨论】：