Unity WebGL全屏状态下JavaScript修改CSS样式失效问题求助

问题根源分析 #

• 全屏事件逻辑错误：当前exitHandler函数每次触发fullscreenchange就调用全屏请求，会导致循环触发事件，完全错误处理了全屏状态切换。
• Unity WebGL全屏上下文特性：Unity WebGL默认让游戏canvas进入全屏而非整个document，cart-modal可能不在全屏上下文内，导致样式修改无法生效。
• 键盘事件兼容性问题：keypress事件已被废弃，且全屏环境下可能被Unity优先捕获，导致监听失效。

修复步骤 #

1. 修正全屏事件处理逻辑 #

替换原全屏代码，正确判断全屏状态并处理元素上下文：

// 监听全屏切换事件
document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
document.addEventListener('mozfullscreenchange', handleFullscreenChange);
document.addEventListener('MSFullscreenChange', handleFullscreenChange);

function handleFullscreenChange() {
    const isFullscreen = !!(document.fullscreenElement || 
                          document.webkitFullscreenElement || 
                          document.mozFullScreenElement || 
                          document.msFullscreenElement);
    
    const cartModal = document.getElementById('cart-modal');
    const unityCanvas = document.querySelector('#unity-canvas');
    
    if (isFullscreen && unityCanvas && cartModal) {
        // 进入全屏时将模态框移入Unity canvas容器
        unityCanvas.appendChild(cartModal);
    } else if (!isFullscreen && cartModal) {
        // 退出全屏时移回原容器（这里假设原容器是body，可根据实际修改）
        document.body.appendChild(cartModal);
    }
}

// 单独写全屏切换函数，绑定到按钮或其他触发事件
function toggleFullscreen() {
    const unityCanvas = document.querySelector('#unity-canvas');
    if (!unityCanvas) return;

    if (!document.fullscreenElement) {
        unityCanvas.requestFullscreen?.() || 
        unityCanvas.mozRequestFullScreen?.() || 
        unityCanvas.webkitRequestFullscreen?.() || 
        unityCanvas.msRequestFullscreen?.();
    } else {
        document.exitFullscreen?.() || 
        document.mozCancelFullScreen?.() || 
        document.webkitExitFullscreen?.() || 
        document.msExitFullscreen?.();
    }
}

2. 替换键盘事件监听为keydown #

改用兼容性更好的keydown事件，同时增加元素存在性判断：

document.addEventListener("keydown", function (event) {
    // 可选：阻止Unity捕获事件后阻止冒泡
    // event.stopPropagation();
    
    if (event.key === 'z' || event.keyCode === 122) {
        disableCartModal();
    }

    if (event.key === 'x' || event.keyCode === 120) {
        enableCartModal();
    }
});

function disableCartModal() {
    const cartModal = document.getElementById("cart-modal");
    if (cartModal) {
        cartModal.style.display = "none";
        // 强制触发重绘，解决样式不更新问题
        void cartModal.offsetWidth;
    }
}

function enableCartModal() {
    const cartModal = document.getElementById("cart-modal");
    if (cartModal) {
        cartModal.style.display = "block";
        // 强制触发重绘
        void cartModal.offsetWidth;
    }
}

3. 配置CSS确保层级和显示 #

添加CSS保证模态框在全屏时不会被遮挡：

#cart-modal {
    position: fixed;
    z-index: 9999; /* 层级高于Unity canvas */
    /* 保留原有样式 */
}

4. Unity WebGL额外配置 #

• 在Unity Player Settings中开启"Allow Fullscreen"选项。
• 确保WebGL模板的HTML中，Unity canvas的id为unity-canvas（与上述代码匹配）。

内容的提问来源于stack exchange，提问作者CosmicSeizure