2016-12-30 58 views
0

我想隱藏和顯示一些HTML塊,而切換A型架的VR模式:切換DOM的知名度與A字架

// Enter VR Mode and hide some DOMs 
// opaicty: 0 is applied by .lightOff 
AFRAME.registerComponent('entering-vr', 
{ 
    schema: 
    { 
     type: 'selector' 
    }, 

    init: function() 
    { 
     var enterButton = document.querySelector('.a-enter-vr-button'); 

     enterButton.addEventListener('click', function() 
     { 
      document.querySelector('.site-header').classList.add('lightOff'); 
      document.querySelector('.featuredImage').classList.add('lightOff'); 
     }) 
    } 
}); 


// Exit VR Mode and restore visibility 
AFRAME.registerComponent('exting-vr', 
{ 
    schema: 
    { 
     type: 'selector' 
    }, 

    init: function() 
    { 
     function removeLightOff() 
     { 
      document.querySelector('.site-header').classList.remove('lightOff'); 
      document.querySelector('.featuredImage').classList.remove('lightOff'); 
     } 

     // On Clicking [X] Button in Mobile 
     var exitButton = document.querySelector('.a-orientation-modal button'); 
     exitButton.addEventListener('click', removeLightOff()); 
     // On Exiting Fullscreen in Desktop 
     if (document.addEventListener) 
     { 
      document.addEventListener('webkitfullscreenchange', exitHandler, false); 
      document.addEventListener('mozfullscreenchange', exitHandler, false); 
      document.addEventListener('fullscreenchange', exitHandler, false); 
      document.addEventListener('MSFullscreenChange', exitHandler, false); 
     } 
     function exitHandler() 
     { 
      if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== null) 
      { 
       removeLightOff(); 
      } 
     } 
    } 
}); 

它的工作相當不錯的桌面瀏覽器。但是,它並不總是適用於移動設備。 「有時」它添加了.LightOff到.site-header和.featuredImage。單擊.a-orientation-modal中的X按鈕不會移除.LightOff。

如何使切換始終在移動設備中工作? 謝謝!

+0

你在軟件中遇到了這個bug嗎? – zerohero

+0

我認爲a-frame社區鼓勵用戶在這裏發佈問題:p – ymcheung

+0

這個問題很好,儘管目前的形式可能更多地與全屏API的瀏覽器實現不一致,而不是A幀庫。我想你可以通過在''元素上監聽'enter-vr'和'exit-vr'事件來解決所有這些問題,而不是文檔上的全屏事件。這對你有用嗎? –

回答

0

正如唐提到的,嘗試使用enter-vr/exit-vr事件。