通过a - frame的VR模式按钮隐藏页面元素

我使用带有嵌入属性的A-Frame

请参考此代码:

http://codepen.io/ymcheung/full/zKyyqX/

<a-scene embedded>
    <a-sky src="https://raw.githubusercontent.com/aframevr/aframe/master/examples/boilerplate/panorama/puydesancy.jpg" rotation="0 -130 0"></a-sky>
</a-scene>

---

// .a-enter-vr-button is supplied by A-Frame
var sceneVRButton = document.querySelector('.a-enter-vr-button');

点击右下角的VR模式按钮，桌面进入全屏模式，移动端进入VR- glass模式。

在移动模式下，工具栏仍然在屏幕上，我想暂时隐藏它。

function hideinHome() 
{
    document.querySelector('.floatingBar').style.opacity = 0;
}
sceneVRButton.addEventListener('click', hideinHome, false);

然而，A-Frame的dom似乎比javascript加载得晚。

在Chrome的控制台有消息:

Uncaught TypeError: Cannot read property 'addEventListener' of null

有没有办法"听"A-Frame的dom或进入手机全屏模式?

谢谢!

AFRAME.registerComponent('hide-on-enter-vr-click', {
  schema: {type: 'selector'},
  init: function () {
    var element = this.data;
    var button = this.el.querySelector('.a-enter-vr-button');
    button.addEventListener('click', function () {
      element.style.opacity = 0;
    });
  }
});

<a-scene hide-on-enter-vr-click=".floatingBar"></a-scene>