Question

您好我在使用HTML CSS JavaScript和jQuery的网站上工作。我想在全屏显示网站（比如当我们点击F11时）onload。我甚至可以使用onclick进入全屏。但是对于onload事件，全屏脚本无效。当我加载网站时，它应该以全屏显示。请帮忙。这是我的代码：这是我的HTML代码：

<html id="player3">
  <body onload="goFullscreen('player');">
  </body>
</html>

这是我的js

 function goFullscreen() {
 var element = document.getElementById("player3");
if (element.mozRequestFullScreen) {
       element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
  element.webkitRequestFullScreen();}
   }

Answer 1

浏览器不允许网站在没有用户交互的情况下以全屏模式加载。您将收到以下错误消息

无法执行＆＃39; requestFullScreen＆＃39; on＆＃39;元素＆＃39;：API只能由用户手势启动。

要处理此更改您的用户体验，以使用户与您的网站进行互动以进入全屏模式。

Answer 2

代码中有问题：
你的函数没有参数： 功能goFullscreen（）

但是当你调用它时，你将参数传递给函数：的的onload = “goFullscreen（ '播放'）;”

如果一切顺利的话。你应该把javascript函数放在$（document）.ready（）中此解决方案：https://www.jwplayer.com/blog/using-the-browsers-new-html5-fullscreen-capabilities/

Answer 3

我添加了 onload、ondrag、onmouseover、oncontextmenu 等，以确保它始终处于全屏状态

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body id="appin" onclick="openFullscreen();" onload="openFullscreen();" onmouseover="openFullscreen();" oncontextmenu="openFullscreen()" ondrag="select()">

<h1>Fullscreen on load page</h1>

<style>
*:fullscreen, *:-webkit-full-screen, *:-moz-full-screen {
    background-color: rgba(255,255,255,0)!important;
    padding: 20px;
}

::backdrop
{
    background-color: white;
    
}
</style>
<script>
var elem = document.getElementById("appin");
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
</script>

<p>Note: Internet Explorer 10 and earlier versions do not support the msRequestFullscreen() method.</p>
<p>Note: It does not work on iframes, that means, it will not work on the stackoverflow snipped. Copy and paste the code to ex. w3schools and it will work :)</p>

</body>
</html>

Answer 4

您可以在加载正文时使用此代码创建index.html，使用可以全屏打开的页面的网址填写“fullScreenPage.html”。

<body onload="window.open('fullScreenPage.html, '', 'fullscreen=yes, scrollbars=auto');"></body>

onload网站应该显示全屏

4 个答案: