当前位置：首页 > JavaScript

原生js实现禁止截屏

2026-04-04 23:19:04JavaScript

在原生JavaScript中实现禁止截屏的功能存在一定局限性，因为浏览器出于安全考虑不允许直接控制操作系统级别的截屏行为。但可以通过以下方法增加截屏难度或干扰截屏结果：

禁用右键和开发者工具

通过阻止默认右键菜单和禁用开发者工具快捷键，减少用户手动截屏的途径：

原生js实现禁止截屏

document.addEventListener('contextmenu', function(e) {
  e.preventDefault();
});

document.addEventListener('keydown', function(e) {
  // 禁用F12、Ctrl+Shift+I等开发者工具快捷键
  if (e.key === 'F12' || 
      (e.ctrlKey && e.shiftKey && e.key === 'I') || 
      (e.ctrlKey && e.shiftKey && e.key === 'J') ||
      (e.ctrlKey && e.key === 'U')) {
    e.preventDefault();
  }
});

动态内容干扰

使用Canvas绘制敏感内容并定期更新，使静态截屏难以获取完整信息：

原生js实现禁止截屏

const canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);

const ctx = canvas.getContext('2d');
function drawProtectedContent() {
  ctx.fillStyle = 'white';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = 'black';
  ctx.font = '20px Arial';
  ctx.fillText('敏感内容：' + Math.random().toString(36).substring(2), 50, 50);

  setTimeout(drawProtectedContent, 1000); // 每秒刷新内容
}
drawProtectedContent();

全屏API限制

强制全屏模式并监听退出事件，降低截屏机会：

document.documentElement.requestFullscreen()
  .catch(err => console.error('全屏失败:', err));

document.addEventListener('fullscreenchange', () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
      .catch(err => console.error('重新进入全屏失败:', err));
  }
});

视觉干扰层

叠加半透明遮罩层干扰截屏效果：

.protection-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    rgba(0,0,0,0.1),
    rgba(0,0,0,0.1) 10px,
    rgba(255,255,255,0.1) 10px,
    rgba(255,255,255,0.1) 20px
  );
  pointer-events: none;
  z-index: 9999;
}