使用 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 内容。
这是我用于在网站上加载 WebGL 内容的 iframe。
<!DOCTYPE html>
<html>
<body>
<iframe src="WEBGL CONTENT IS HERE"></iframe>
</body>
</html>
如果有人能提供帮助那就太好了!
最佳答案
您是否尝试过向 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>
希望这能解决您的问题。
关于javascript - 使用 HTML 和 JavaScript 的 WebGL 全屏按钮？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66427782/