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。
如何使切換始終在移動設備中工作? 謝謝!
你在軟件中遇到了這個bug嗎? – zerohero
我認爲a-frame社區鼓勵用戶在這裏發佈問題:p – ymcheung
這個問題很好,儘管目前的形式可能更多地與全屏API的瀏覽器實現不一致,而不是A幀庫。我想你可以通過在' '元素上監聽'enter-vr'和'exit-vr'事件來解決所有這些問題,而不是文檔上的全屏事件。這對你有用嗎? –