全屏 - 浏览器 JS

Question

我有一个js脚本，可以让我在浏览器上切换到全屏模式。 我有一个问题，如果我更改页面或重新加载页面，全屏将被删除。 即使更改或重新加载页面，如何保持全屏模式？

谢谢

function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
}

Answer 1

当页面加载时，您可以触发 document.ready 事件

$(document).ready(function() {
// make fullscreen
});

Answer 2

只需发送一个${document}.ready(function() { // make full screen here })请求，使其全屏显示，因此当您更改页面时它会自动执行此操作

Answer 3

首先在html 中添加一个<script src>for jquery。然后在你的javascript文件/标签中，添加document.ready()并将你的代码放在里面。

代码示例：

将 Jquery 添加到 HTML

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

建议使用此处的脚本以实现安全完整性：https://code.jquery.com/

您的 JS

你的js应该看起来像这样：

$(document).ready(function() {
openFullscreen();
});
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
}

上面要做的是，在加载文档时调用您的全屏函数。您也可以在没有 jquery 的情况下执行此操作，并在 JS 中添加事件侦听器，但这更容易理解。

编辑：必须在javascript代码之前导入JQuery！在页面末尾开始其他查询之前导入 Jquery，以提高性能。

Answer 4

一种选择是使用localStorage.

如果用户切换到全屏，您可以在localStorage中设置键/值对，如下所示：

localStorage.setItem("fullScreen", "true");

然后，当页面加载时，您可以检查此键是否存在，如果存在，则切换到全屏(如果其值为 true(。例如：

let fullScreen = localStorage.getItem("fullScreen");
if (typeof fullScreen !== "undefined" && JSON.parse(fullScreen)) {
openFullscreen();
}

只要确保清除该值，如果他们选择退出全屏。