当前位置：首页 > JavaScript

js实现禁止截图

2026-03-01 13:09:59JavaScript

禁用浏览器截图的方法

在网页中完全禁止用户截图存在技术限制，但可以通过以下方法增加截图难度或干扰截图效果：

阻止右键菜单和快捷键

禁用常见的截图快捷键和右键菜单能阻止部分用户操作：

js实现禁止截图

document.addEventListener('keydown', function(e) {
  // 阻止Print Screen键
  if (e.key === 'PrintScreen') {
    e.preventDefault();
    return false;
  }
  // 阻止Alt+PrintScreen组合键
  if (e.altKey && e.key === 'PrintScreen') {
    e.preventDefault();
    return false;
  }
  // 阻止Ctrl+P（打印快捷键）
  if (e.ctrlKey && e.key === 'p') {
    e.preventDefault();
    return false;
  }
});

// 禁用右键菜单
document.addEventListener('contextmenu', function(e) {
  e.preventDefault();
  return false;
});

动态干扰屏幕内容

通过周期性修改DOM元素干扰截图工具：

js实现禁止截图

setInterval(() => {
  const noise = document.createElement('div');
  noise.style.position = 'fixed';
  noise.style.top = '0';
  noise.style.left = '0';
  noise.style.width = '100%';
  noise.style.height = '100%';
  noise.style.backgroundColor = `rgba(${Math.random()*255},${Math.random()*255},${Math.random()*255},0.01)`;
  noise.style.pointerEvents = 'none';
  noise.style.zIndex = '9999';
  document.body.appendChild(noise);
  setTimeout(() => noise.remove(), 50);
}, 100);

禁用开发者工具

虽然不能完全阻止，但可以检测并干扰开发者工具：

(function() {
  const devtools = /./;
  devtools.toString = function() {
    document.body.innerHTML = '开发者工具已禁用';
    window.location.reload();
  };
  console.log('%c', devtools);
})();

// 检测窗口大小变化（部分浏览器打开开发者工具会改变窗口尺寸）
let windowWidth = window.innerWidth;
window.addEventListener('resize', function() {
  if (window.innerWidth !== windowWidth) {
    document.body.innerHTML = '检测到非法操作';
  }
});

全屏API限制

使用全屏API并监听退出事件：

document.documentElement.requestFullscreen()
  .then(() => {
    document.addEventListener('fullscreenchange', (e) => {
      if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen()
          .catch(err => console.error(err));
      }
    });
  })
  .catch(err => console.error(err));