前端无法真正限制屏幕录制，只能通过视觉干扰（如动态黑块遮盖、水印）、操作提示（二次确认+法律提醒）、内容脱敏及禁止右键等方式进行有限防御，高危场景须依赖原生app或可信容器。
前端无法真正限制屏幕录制，Layui 或任何纯 JavaScript 方案都做不到；所谓“防录屏”在浏览器环境里是伪命题，只能做视觉干扰或提示性遮盖，且仅对非专业用户有心理威慑作用。
为什么浏览器里没法禁用录屏
Web 标准不提供访问系统录屏/截屏状态的 API，screen.orientation、document.visibilityState、beforeunload 等均无法感知用户是否正在录屏。Android 的 FLAG_SECURE 是原生 Activity 级别控制，WebView 和 PWA 均不继承该标志；iOS 更无等效机制。所有“检测录屏中”的 JS 库，本质都是伪造判断（比如监听鼠标移动+键盘空闲+全屏状态），极易绕过。
动态加黑块遮盖敏感区域的可行做法
这不是防，而是“内容混淆”——当页面进入不可信上下文（如检测到 DevTools 打开、窗口失焦、或手动触发），用 canvas 或绝对定位 div 覆盖指定 DOM 区域。Layui 本身不提供该能力，需自行叠加：
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 用
getBoundingClientRect()获取目标元素位置，生成覆盖div并插入document.body，设置z-index: 999999和background: #000 - 避免用
display: none或visibility: hidden，否则影响布局；黑块应为position: fixed，并监听window.resize重算坐标 - 若遮盖区域含 Layui 表单控件（如
select），注意其下拉面板默认挂载在父容器内，需配合lay-append-to="body"防止被裁剪 - 不要依赖
document.hasFocus()判断——切换标签页时它返回 false，但用户可能正用另一窗口录屏
能做的有限但务实的防御组合
接受技术边界，把力气花在可落地的地方：
- 敏感操作前弹出二次确认层（
layer.confirm），文案强调“本页面含敏感信息，请勿截屏/录屏”，法律效力+心理提醒双管齐下 - 对关键字段（如身份证号、银行卡号）做动态脱敏：用
****替换中间字符，并在用户 hover 时才解密显示（需后端配合签名校验） - 利用
canvas绘制水印（如drawWatermark('内部资料')），覆盖整个视口，字体旋转+低透明度+密集排布，增加 OCR 和后期处理成本 - 禁止右键和拖选：
document.oncontextmenu = () => false、document.ondragstart = () => false，虽易禁用，但筛掉随手截图的用户
真正的高危场景（如金融后台）必须依赖客户端 SDK 或原生 App，Web 页面只承担展示职责，核心交互走跳转或 iframe 嵌入可信容器——这点常被忽略，却是唯一可靠路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
