React-VR iFrame全屏

Question

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

Answer 1

无法找到任何相关的官方文档，但如果您查看VRInstance的实施，您会注意到隐藏该按钮的hideFullscreen选项。

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

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

只需在页面中渲染一个按钮，然后在点击时切换全元模式以获取DOM元素。

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

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