四行JavaScript代码实现禁止复制网站内容

发表于：2022-03-29 09:53:10浏览：1953次TAG： #javascript #禁止复制

我们常常会看到百度文库或者其他网站的文字无法复制，这种做法是如何实现的呢？其实很简单，跟大家分享下面几种方法。

1、普通版-让别人无法复制你的网站文字
原理分析
对于普通人来说，他们复制网页内容无非就是选中一段文字，然后鼠标右键打开菜单进行鼠标点击复制，所以我们针对这种方法的措施就是禁用鼠标右键菜单。

// 禁用右键菜单
document.addEventListener('contextmenu',function(e){
    e.preventDefault();  // 阻止默认事件
});

上面步骤完成之后，我们再来考虑另为一种情况，有些键盘党可能会直接选中文字然后进行CRL + C 复制，这时我们只禁用鼠标右键菜单就不行了，因此我们还需要禁止鼠标选中。

//禁止鼠标选中
document.addEventListener('selectstart',function(e){
  e.preventDefault();
});

示例演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>小样，来复制这段文字试试？</p>
    <script>
        // 1.禁用右键菜单
        document.addEventListener('contextmenu',function(e){
            e.preventDefault();  // 阻止默认事件
        });
        // 2.禁止鼠标选中
        document.addEventListener('selectstart',function(e){
            e.preventDefault();
        });
    </script>
</body>
</html>

其中addEventListener是注册事件的一种方式，function(e)中的e即event事件对象，contextmenu是右键菜单，e.preventDefault()方法阻止默认事件，即这里的阻止右键菜单，下面的禁止鼠标选中同理。

结果：浏览器界面的这段文字你无法选中，无法打开鼠标右键菜单。

2、毁灭版-禁用F12(针对程序员)
原理分析
上面的四行代码拦住了普通人，但对我们的程序员无所不能的程序员是没有作用的，他们可以打开F12在源码中复制，因此还需要在上述基础上再加四行代码，这四行代码负责禁用F12。

//禁止键盘F12键
document.addEventListener('keydown',function(e){
    if(e.key == 'F12'){
        e.preventDefault(); // 如果按下键F12,阻止事件
     }
});

这里的keydown是键盘按下事件，e是事件对象，这里是键盘按下事件的对象，我们可以输出一下e看看keydown事件会产生那些属性。
这里我们常用keyCode和key, keyCode是按下的键的字母对应的ascll码值，我们可以看到，浏览器给功能键F12给了123,而123在ascll表中对应‘{’。所以我们这里就用key属性判断，直观一点。

示例演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>小样，来复制这段文字试试？</p>
    <script>
        // 1.禁用右键菜单
        document.addEventListener('contextmenu',function(e){
            e.preventDefault();  // 阻止默认事件
        });
        // 2.禁止鼠标选中
        document.addEventListener('selectstart',function(e){
            e.preventDefault();
        });
        // 3.禁止键盘F12键
        document.addEventListener('keydown',function(e){
            if(e.key == 'F12'){
                e.preventDefault(); // 如果按下键F12,阻止事件
            }
        });
    </script>
</body>
</html>

结果：程序员们连F12开发者工具都打不开，你说狠不狠？

最后，也给个破解不能F12的方法:
有一种方法可以调出F12的，可以偷偷把光标定到地址栏上，然后轻轻地按下F12。是不是成功了？赶紧去试试吧。

栏目分类全部>