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 so you don't have to worry about the various cross-browser implementation details of the Fullscreen API.

这样的库

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

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

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

React-VR iFrame 全屏

React-VR iFrame Fullscreen

iframe

react-360