React VR iFrame全屏

Question

创建一个React VR应用程序，我需要iFrame到一个现有的应用程序。我的问题是关于全屏按钮。如何隐藏此按钮并在其他应用程序中进行管理，或者向父程序发送单击该按钮的消息？

Answer 1

无法找到这方面的任何正式文档，但是如果您查看VRInstance的实现，您会注意到隐藏该按钮的hideFullscreen选项。

// vr/client.js
const vr = new VRInstance(bundle, 'VRTEST', parent, {
  hideFullscreen: true,
  ...options,
});

要切换iframe的全屏模式，可以使用像screenfull.js这样的库，这样就不必担心全屏API的各种跨浏览器实现细节。

只需在页面中呈现一个按钮，并使其在单击时切换DOM元素的全屏模式。

const vrIframe = document.getElementById('vrIframe');

document.getElementById('vrFullscreenButton').addEventListener('click', () => {
  if (screenfull.enabled) {
    screenfull.request(vrIframe);
  }
});