当前位置：文江博客话题详情

有什么办法可以在页面加载时进入全屏模式吗？

发布于 2025-01-10 11:28:58 字数 78 浏览 0 评论 0原文

我正在做测验，并希望在特定时间内将屏幕转换为加载页面时的全屏模式，有什么方法可以实现此目的或任何替代方案吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

污味仙女 2025-01-17 11:28:58

需要用户交互才能进入全屏模式。这是一项安全功能。

想象一下能够强制某种弹出窗口全屏显示、锁定鼠标指针以及未经许可播放广告。
具有“启用全屏”链接或按钮，其可见性在“更改全屏”事件处理程序中切换
该文档似乎是一种务实/更好的方法。

即使您尝试，您也会收到以下错误消息

无法在“Element”上执行“requestFullScreen”：API 只能
由用户手势发起。

因此，不可能在全屏模式下加载页面，但您可以使用以下代码在某些操作上触发它：

<script>
/* Get the documentElement (<html>) to display the page in fullscreen */
var elem = document.documentElement;

/* View in fullscreen */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}

/* Close fullscreen */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}
</script>

参考：w3Schools - 全屏

User interaction is required to enter full-screen mode. This is a security feature.

Imagine being able to force a popup window of some kind to go full screen, lock the mouse pointer, and play an ad without permission.
Having an "Enable Full Screen" link or button whose visibility is toggled in the "Change Full Screen" event handler in the
the documentation seems like a pragmatic/better approach.

Even if you'll try, you will get the following error message

Failed to execute 'requestFullScreen' on 'Element': API can only be
initiated by a user gesture.

So, It's not possible to load a page on fullscreen mode but you can use the following code to trigger it on some action:

<script>
/* Get the documentElement (<html>) to display the page in fullscreen */
var elem = document.documentElement;

/* View in fullscreen */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}

/* Close fullscreen */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}
</script>

Reference: w3Schools - Full Screen

回复收藏 0 原文

~没有更多了~