四行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。是不是成功了?赶紧去试试吧。
- PHP对手机浏览器,微信浏览器,企业微信浏览器的判断方法
- Thinkphp6使用Dompdf将HTML转换为PDF,并且支持中文
- 国产PHP框架,ThinkPHP 8.1版本发布,新版功能盘点
- ThinkPHP6判断HTTP的请求类型是GET,POST,PUT,DELETE或者HEAD
- Thinkphp8通过PhpWord导出生成word文件,支持图片处理,富文本导出完整方案
- 勾股博客介绍及安装教程
- Layui 2.9.0 发布,收官 2023,同时官方发布3.0 版本计划和开发周期
- ThinkPHP6的前置中间件和后置中间件的区别,中间件解决跨域问题的方案
- bignumber.js,javascript前端高精度计算库推荐
- 勾股OA系统的进销存管理模块功能说明