使用HTML和JavaScript的WebGL全屏按钮？

使用HTML和JavaScript的WebGL全屏按钮？

我已经搜索了很多次这个主题，但都找不到有效的方法，不过我确实找到了一个按钮，可以让我的页面全屏显示

<input type="button" value="click to toggle fullscreen" onclick="toggleFullScreen()">
<script>function toggleFullScreen() {
  if ((document.fullScreenElement && document.fullScreenElement !== null) ||    
   (!document.mozFullScreen && !document.webkitIsFullScreen)) {
    if (document.documentElement.requestFullScreen) {  
      document.documentElement.requestFullScreen();  
    } else if (document.documentElement.mozRequestFullScreen) {  
      document.documentElement.mozRequestFullScreen();  
    } else if (document.documentElement.webkitRequestFullScreen) {  
      document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);  
    }  
  } else {  
    if (document.cancelFullScreen) {  
      document.cancelFullScreen();  
    } else if (document.mozCancelFullScreen) {  
      document.mozCancelFullScreen();  
    } else if (document.webkitCancelFullScreen) {  
      document.webkitCancelFullScreen();  
    }  
  }  
}</script>

const fullScreen = (invoker) => {
  const fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement;

  if (!fullscreenElement) {

    if (invoker.requestFullscreen) { invoker.requestFullscreen() }
    else if (invoker.webkitRequestFullscreen) { invoker.webkitRequestFullscreen() }
         
  } else {
    
    if (document.exitFullscreen) { document.exitFullscreen() }
    else if (document.webkitExitFullscreen) { document.webkitExitFullscreen()}
  }

}

---

如果有人能帮忙，那就太好了

您是否尝试调用iframe元素的requestFullscreen

我刚刚编写了这个快速测试，它很有效：

<div>
<iframe src="https://bbc.com"></iframe>
</div>
<button onclick="toggle()">Make that iframe full screen</button>

<script>
  function toggle() {
    document.querySelector('iframe').requestFullscreen();
  }
</script>

使iframe全屏显示
函数切换（）{
document.querySelector（'iframe'）.requestFullscreen（）；
}

---

希望这能解决您的问题。

这里有一个更好的方法，可以在包括safari在内的所有浏览器中使用

创建一个使窗口全屏显示的函数

<input type="button" value="click to toggle fullscreen" onclick="toggleFullScreen()">
<script>function toggleFullScreen() {
  if ((document.fullScreenElement && document.fullScreenElement !== null) ||    
   (!document.mozFullScreen && !document.webkitIsFullScreen)) {
    if (document.documentElement.requestFullScreen) {  
      document.documentElement.requestFullScreen();  
    } else if (document.documentElement.mozRequestFullScreen) {  
      document.documentElement.mozRequestFullScreen();  
    } else if (document.documentElement.webkitRequestFullScreen) {  
      document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);  
    }  
  } else {  
    if (document.cancelFullScreen) {  
      document.cancelFullScreen();  
    } else if (document.mozCancelFullScreen) {  
      document.mozCancelFullScreen();  
    } else if (document.webkitCancelFullScreen) {  
      document.webkitCancelFullScreen();  
    }  
  }  
}</script>

const fullScreen = (invoker) => {
  const fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement;

  if (!fullscreenElement) {

    if (invoker.requestFullscreen) { invoker.requestFullscreen() }
    else if (invoker.webkitRequestFullscreen) { invoker.webkitRequestFullscreen() }
         
  } else {
    
    if (document.exitFullscreen) { document.exitFullscreen() }
    else if (document.webkitExitFullscreen) { document.webkitExitFullscreen()}
  }

}

现在您可以调用任何事件侦听器

const webgl = document.querySelector("canvas.webgl");

webgl.addEventListener('dblclick', () => {
  // calling our fullscreen function here webgl is invoker
  fullScreen(webgl);
})

---

非常感谢，这很有效！