Layui如何监听layer弹窗在全屏与窗口模式间的切换

layer全屏/还原操作不触发window.resize事件，需用full/restore回调并手动维护isFullscreen状态，手动调用layer.full()时需同步更新状态并延时重算尺寸。

layer全屏切换时没有触发resize事件？

layer 的全屏/还原操作本身不触发 window.onresize，也不是标准 dom resize 事件源。你监听不到，不是代码写错了，是 layer 自己没抛——它只在内部改了 style 和 class，没 dispatchevent。

实操建议：

• 别依赖 window.addEventListener('resize', ...) 捕获 layer 全屏切换
• 改用 layer 提供的 full 和 min 回调（注意：不是 success 或 end）
• 这两个回调只在用户点击全屏/最小化按钮时触发，不适用于手动调用 layer.full(index) 后再还原的场景（此时需自行补逻辑）

如何在 full/min 回调里拿到当前弹窗状态？

layer 不提供现成的「当前是否全屏」API，layer.full(index) 和 layer.restore(index) 是命令式调用，无返回值。你需要自己维护状态。

实操建议：

• 在打开弹窗时用一个变量或 data 属性记录初始状态：let isFullscreen = false;
• 在 full 回调里设为 true，在 min 回调里设为 false（注意：min 不等于还原，而是最小化；真正还原对应的是 restore 回调）
• layer 2.8+ 支持 restore 回调，但仅当用户点击「还原」按钮时触发；若用户拖拽窗口大小导致退出全屏，则仍不会触发任何回调

示例片段：

layer.open({  type: 1,  content: '<div>test</div>',  full: function(layero) {    isFullscreen = true;    console.log('已全屏');  },  restore: function(layero) {    isFullscreen = false;    console.log('已还原');  }});

手动触发全屏后怎么同步状态？

用 layer.full(index) 或 layer.restore(index) 主动控制时，full/restore 回调并不会执行——这是 layer 的设计缺陷，文档也没说明。

实操建议：

• 每次手动调用前，先同步更新你的状态变量：isFullscreen = true; layer.full(index);
• 如果需要响应式重绘（比如调整内部 iframe 高度），在调用后加个 setTimeout(() => { /* 重算尺寸 */ }, 10)，因为 layer 的 DOM 更新是异步的
• 避免在 full 回调里再调一次 layer.full(index)，会引发重复全屏或样式错乱

兼容性与 DOM 更新时机问题

layer 全屏本质是给弹窗容器加 layui-layer-full class 并设置 top/left/width/height 为 0/0/100%/100%，但这个过程在不同浏览器中渲染节奏不一致，尤其在 iframe 弹窗里容易拿不到最新尺寸。

实操建议：

• 不要在 full 回调里直接读 layero.width()，应改用 layero.find('.layui-layer-content') 再算内部高度
• Chrome 下可能需等 requestAnimationFrame 才能读到真实尺寸；Firefox 下有时要等两个 tick
• 移动端 Safari 对 vh 计算异常，全屏后建议用 document.documentElement.clientHeight 而非 window.innerHeight

事情说清了就结束。最麻烦的其实是「用户拖拽退出全屏」这种行为——layer 完全不监听，也没暴露底层 resize hook，只能靠轮询 getComputedStyle(layero[0]).width 或监听 document 的 visibilitychange 做兜底，但这已经超出 layer 原生能力范围了。