工作效率：禁止转载-复制解决方案（知乎、简书）

Freedom123

发布于 2024-03-29 14:58:45

79900

代码可运行

文章被收录于专栏：DevOpsDevOps

运行总次数：0

代码可运行

简介

今天照例进行日常总结，在查找资料进行ctrl+c加ctrl+v时，发现知乎的页面竟然禁止转载了，也就是对复制做了拦截

后续发现知乎不是所有内容都是禁止转载的，只有设置了禁止转载的内容才禁止复制，普通内容在复制后会加上版权以及来源

一、前端实现禁止复制功能

通过js阻止复制功能实现禁止复制。
通过css样式user-select:none阻止选中实现禁止复制。

目前一般选择其中一种，比如简书、掘金、知乎等资讯问答类，也有混合使用的，比如起点网这类阅读为主的。

1.js实现防复制功能

js实现防复制一般就是使用copy这个api:

document.body.oncopy = function(e) {
    // 全局监听
};
$('#articl_content').oncopy = function(e) {
    // 局部监听
};
window.addEventListener('copy', e => {
    // 全局监听
})

以及document.getSelection()，这个方法是用来操作选中的内容的api，其中：document.getSelection(0).toString()可以获得选中内容的文字部分，document.getSelection(0).empty()可以取消选中，在getSelection()中传参可以获取不同的选中内容段，更多有趣的方法在它原型里。

另外顺便提一下和复制相关的还有剪切-cut，粘贴-paste，用法和copy一致。

一些网站虽然不禁止用户复制内容，但会在复制的内容后面加版权以及来源信息，这个就需要用到剪切板这个对象了，即：clipboa rdData。它常用的方法有3个，setData('text', 插入的内容)插入数据，getData()获取剪切板的数据，clearData('text') 清除数据。

2.知乎的转载加版权实现

一般常用的js复制功能有2种，一种是document.execCommand('copy')，一般在富文本编辑器框架中经常使用到，目前虽然在js 手册中显示已废弃，但大部分浏览器还是支持该功能的。

另外一种就是oncopy监听，复制的数据通过window.getSelection这个api获取，如果需要加版权信息，在数据放入剪切板前处理下，加上版权信息接口，知乎就是用的这种，大部分网站都是这样的。

一般网站都是在部分元素上做监听的，不会进行全局监听，document.body.oncopy实现的是全局监听， document.getElementById（ ‘xx’).oncopy实现的某个元素内监听。

一般实现：

document.body.oncopy = (event) => {
    // 是否登录，没登陆就禁止转载
    if (!isLogin()) return alert('禁止转载'); 
    event.preventDefault(); // 取消浏览器原本默认的copy事件
    let authorizationInfo, // 授权信息
        copyText = window.getSelection(0).toString(); // 获取被复制的文本内容，没有dom结构
    if (copyText.length > 20) {
        // 一般少量复制网站是允许的，字数长度超过20个，则加入授权信息
        copyText = `${copyText}
`
    }
    // 兼容一下ie浏览器，ie中是window，其他浏览器是event
    let clipboardData = event.clipboardData || window.clipboardData;
    clipboardData.setData('text', copyText);
}

3.起点网防复制功能实现

禁止复制+剪切
禁止右键，右键某些选项：复制粘贴剪切
禁用文字选择：user-select:none

具体实现:

// 禁止右键
document.body.oncontextmenu = e => {
    return false; 
    // e.preventDefault();
};
// 禁止文字选择 
document.body.onselectstart = e => {
    return false; 
    // e.preventDefault();
};
// 禁止复制 
document.body.oncopy = e => {
    return false; 
    // e.preventDefault();
}
// css禁止用户选择
.content{
   user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
}