时间戳

首页 > 解决方案 > 使用 HTML 和 JavaScript 的 WebGL 全屏按钮？

javascript - 使用 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>

这确实有效，但不适用于 WebGL 内容。这是我iframe用来在我的网站上加载 WebGL 内容的方法。

<!DOCTYPE html>
<html>
<body>
<iframe src="WEBGL CONTENT IS HERE"></iframe>
</body>
</html>

如果有人可以提供帮助，那就太好了！

标签： javascripthtmljsonbuttonwebgl

解决方案

这是一种更好的方法，它适用于所有浏览器，包括 safari

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

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

推荐阅读