解决全屏模式下部分弹窗不生效问题

问题：解决全屏模式下部分弹窗不生效问题

背景：

JavaScript有一个全屏API：dom.requestFullscreen()，尝试在一些场景中将Designer组件全屏化后，发现有一部分弹窗（选择颜色弹窗）不再出现，这是为什么呢？

解决思路：

首先打开一个Designer组件，观察下颜色选择器的dom结构：

发现其与Designer的dom节点gc-designer-container同在body下，并不是包含关系。

对话框被设计为附加到 document body 而不是 Designer 的 host(gc-designer-container)。所以，如果仅仅是让 Designer 的 host 全屏显示，它就会覆盖主体中的所有其他元素包括对话框。

那么此时如果将 Designer的dom节点gc-designer-container全屏，就会发现颜色选择器将不出现在屏幕中，当退出全屏模式后，发现可以正常显示。

document.getElementById("gc-designer-container").requestFullscreen();

为此，解决方案是需要将弹窗的dom放置在全屏dom容器内。

这里有两个思路，一个是将 Designer 的dom节点、颜色选择器的dom节点，这两个节点的共同父节点全屏，即将body元素全屏；

第二个思路是将 Designer 组件放置在 iframe 容器中，下面分别对这两种方案进行介绍：

方案一：

<body unselectable="on" id="wrap">
<button id="btn" onclick="btn()">全屏</button>
<div id="gc-designer-container">
</div>

<script type="text/javascript">
    var designer
    window.onload = function () {
        designer = new GC.Spread.Sheets.Designer.Designer("gc-designer-container");
        var spread = designer.getWorkbook();
        var sheet = spread.getActiveSheet();

        var cstyle = sheet.getDefaultStyle();
        cstyle.themeFont = null;
        cstyle.font = "24px Meiryo";
        sheet.setDefaultStyle(cstyle);
    }

    function btn() {

        document.getElementById("wrap").requestFullscreen();
        setTimeout(() => {
            const canvas = document.getElementById('gc-designer-container');
            if (document.fullscreenElement) {
                console.log(111)
                canvas.style.height = window.screen.height + 'px';
                canvas.style.width = window.screen.width + 'px';
            } else {
                console.log(222)
                canvas.style.height = '800px';
                canvas.style.width = '80%';
            }
        }, 100)
    }
</script>
</body>

方案二：

<body unselectable="on" id="wrap">
    <button id="btn" onclick="btn()">全屏</button>
    <iframe id="iframe-one" width="100%" height="100%" scrolling="no" src="./index.html"></iframe>

    <script type="text/javascript">
        function btn() {
            let iframe = document.getElementById("iframe-one");
            iframe.requestFullscreen();

        }
    </script>
</body>

在body中创建iframe元素，然后索引指向包含Designer组件的index.html ，然后对iframe元素全屏。

接下来是index.html：

<body>
    <div id="gc-designer-container"></div>
    <script type="text/javascript">
        window.onload = function () {
            var canvas = document.getElementById("gc-designer-container");
            canvas.style.height = window.screen.height + 'px';
            designer = new GC.Spread.Sheets.Designer.Designer("gc-designer-container");
            var spread = designer.getWorkbook();
            var sheet = spread.getActiveSheet();
        }
</script>
</body>

在index.html中完成了 Designer 初始化工作，并且重新设置了高度。

Demo请参考附件。

全屏方案.zip

作者: Ellia.Duan | 审核：Lynn.Dou | 更新时间：2023.12.22