layer.open 的 area 参数用百分比会因 parseInt 解析 '90%' 为 NaN 导致塌缩，正确写法是 area: ['80%', 'auto'] 或 ['80%', '90vh']；type:2 iframe 需在 success 回调中监听 onload 后调用 iframeAuto；小屏适配应使用 $(window).width() 判断，阈值建议 768 或 992；iframeAuto 失效时可改由子页主动通知父页高度。
layer.open 的 area 参数怎么用百分比才不翻车
直接写 area: ['80%', '90%'] 看似合理，但实际会触发 layui 内部一个硬编码减法 bug：源码里对高度字符串做 parseint(this.options.area[1]) - 50，导致 '90%' 被转成 nan，最终算出 nan - 50 → -50px，弹层直接塌缩看不见内容。
真正能用的写法只有两种：
-
area: ['80%', 'auto']—— 宽度按百分比，高度交给内容撑开（仅适用于 type:1，即内嵌 HTML） -
area: ['80%', '90vh']—— 用vh单位绕过 parseInt 解析，但需注意 IE9 不支持
别碰 area: ['auto', 'auto'] 配合 type:2（iframe），它在多数版本里根本不会生效。
type:2 iframe 弹窗如何等加载完再自适应高度
iframe 内容是异步加载的，layer 初始化时根本不知道目标页面多高。必须等 iframe 的 load 事件触发后，再调用 layer.iframeAuto(index)。
关键点：
-
success回调里才能拿到合法的index，不能在 open 外部调用iframeAuto - 务必确认目标页面本身没有设置
body { height: 100% }或固定html高度，否则 iframe 内容高度会被截断 - 如果目标页是跨域的，
iframeAuto会静默失败（因无法读取 iframe.contentDocument）
示例写法：
layui.layer.open({
type: 2,
title: '编辑表单',
area: ['800px', '600px'], // 先给个兜底尺寸
content: '/form/edit?id=123',
success: function(layero, index) {
// 等 iframe 加载完成再适配
const iframe = layero.find('iframe')[0];
iframe.onload = function() {
layui.layer.iframeAuto(index);
};
}
});小屏幕（比如笔记本）下要不要全屏？怎么判断才稳
用 screen.width 判断有风险——它返回的是设备物理宽度，不是浏览器可视区宽度。比如高 DPI 屏幕下，screen.width 可能是 2560，但实际 $(window).width() 只有 1280。
应该用 $(window).width() 或 document.documentElement.clientWidth：
- 判断阈值建议设为
768（平板窄屏）或992（Bootstrap 断点），而不是 1366 这种过时的“笔记本标准” - 全屏后记得监听
resize事件，否则窗口缩小时弹层卡死在旧尺寸 - 调用
layer.full(index)后，不要立刻再调layer.iframeAuto，两者逻辑冲突
稳妥写法：
const winWidth = $(window).width();
let area = winWidth > 992 ? ['800px', '600px'] : ['100%', '100%'];
<p>const index = layer.open({
type: 2,
area: area,
content: '/form/edit?id=123',
success: function(layero, idx) {
if (winWidth <= 992) {
layer.full(idx);
// 全屏后不再调 iframeAuto
} else {
const iframe = layero.find('iframe')[0];
iframe.onload = () => layer.iframeAuto(idx);
}
}
});为什么 layer.iframeAuto 有时没反应
不是你的代码问题，是它本身限制太多：
- 只对 type:2 生效，type:1 用不了
- 依赖 iframe.contentWindow.document.body.scrollHeight，如果目标页没触发重排（比如纯 CSS 布局、未加载完 JS），这个值就是 0
- 某些版本中，如果 iframe 的
src是空字符串或about:blank，会直接跳过计算 - layui 2.8+ 改进了该方法，但老项目若用的是 2.5.6 或更早，基本等于摆设
替代方案：在目标页面末尾加一段脚本，主动通知父页自己的真实高度：
// 目标页（被 iframe 加载的页面）里：
if (parent.layui && parent.layer) {
const height = Math.max(
document.body.scrollHeight,
document.documentElement.scrollHeight
);
parent.layui.layer.style(parent.layer.getFrameIndex(window.name), {
height: height + 'px'
});
}这招不依赖同源策略，也不怕 onload 时机问题，但需要你有权限改目标页代码。
