原生js实现禁止截屏
在原生JavaScript中实现禁止截屏是一个复杂且有限制的需求，因为浏览器和操作系统层面的截屏行为通常不受网页控制。以下是几种可能的方法和注意事项：
禁用右键和快捷键
通过阻止默认行为和禁用常见截屏快捷键（如PrtSc、Alt+PrtSc等），可以增加用户截屏的难度：
document.addEventListener('keydown', function(e) {
if (e.key === 'PrintScreen' ||
(e.ctrlKey && e.key === 'p') ||
(e.altKey && e.key === 'PrintScreen')) {
e.preventDefault();
alert('截屏功能已禁用');
}
});
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
});动态内容干扰
通过定时修改DOM或覆盖动态水印，干扰截屏后的内容可用性：
// 添加动态水印
const watermark = document.createElement('div');
watermark.style.position = 'fixed';
watermark.style.opacity = '0.5';
watermark.style.zIndex = '9999';
document.body.appendChild(watermark);
setInterval(() => {
watermark.textContent = `USER: ${Date.now()}`;
watermark.style.top = `${Math.random() * window.innerHeight}px`;
watermark.style.left = `${Math.random() * window.innerWidth}px`;
}, 100);全屏API限制
强制页面进入全屏模式，减少用户使用系统截屏工具的机会：
document.documentElement.requestFullscreen().catch(e => {
console.error('全屏失败:', e);
});注意事项
- 无法完全阻止：操作系统或浏览器扩展的截屏功能通常无法通过JavaScript阻止。
- 移动端限制：移动设备的硬件截屏（如电源+音量键）无法被网页检测或阻止。
- 用户体验影响：过度限制可能导致用户反感或功能冲突。
补充方案（服务端）
结合服务端技术（如DRM或自定义视频流加密）可增强保护，但需复杂架构支持，非纯前端实现范畴。
以上方法仅能增加截屏难度，无法彻底阻止。实际场景中需权衡安全需求与用户体验。
