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

收藏

本帖最后由 Ellia.Duan 于 2023-2-28 15:27 编辑

js有一个全屏API：dom.requestFullscreen()，当小伙伴们尝试在一些场景中将designer组件全屏化后，发现有一部分弹窗（选择颜色弹窗）不再出现，这是为什么呢？
首先打开一个designer组件，我们观察下颜色选择器的dom结构
image.png221154479.png

发现其与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初始化工作，并且重新设置了高度。

至此，两个方案就介绍完成了。

		自动登录	找回密码
密码			立即注册

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

0 个回复

浏览过的版块

SpreadJS 认证

SpreadJS 高级认证