javascript 使用oncopy 模拟知乎禁止转载,禁止复制

因为网站有一些原创敏感信息,不希望被别人拷贝和转载,故所以要加一个禁止复制,禁止转载验证

因为网站有一些原创敏感信息,不希望被别人拷贝和转载,故所以要加一个禁止复制,禁止转载验证

产品的要求是这样的:右键复制的时候要再鼠标处显示tip框禁止转载,CTRL+C时在选中的文本中间显示tip框禁止转载

于是一顿苦思冥想,便想到了,js 里有一个oncopy 可以监听文本复制,需要注意的是oncopy 可以监听到三种情况,具体的用法可以参考https://www.runoob.com/jsref/event-oncopy.html

按下 CTRL + C
在你的浏览器的 Edit(编辑) 菜单中选择 “Copy(复制)”
右键鼠标按钮,在上下文菜单中选择 “Copy(复制)” 命令。

这正好满足了,所有的复制方式监听

<p oncopy="return false;">尝试拷贝文本</p>

直接禁止复制,直接用return false;

以下是美化后的

思路:

因为要tip框显示在鼠标处,所以要获取鼠标的定位,右键点击复制的时候,是获取不到鼠标位置的,因为鼠标已经离开了网页,所以要再右键一点击的就记录下鼠标位置,并到最后把鼠标的定位给到tip即可

CTRL+C的话,因为没有鼠标定位,所以只能获取到选中区域位置坐标,来显示tip标签,这里需要注意的是,有的人,按复制键有时候,喜欢多按几次,总怕复制不上,所以就出现了oncopy 多次调用,所以要加一个状态来判断,触发过一次了,就不用触发下次了

<div class="answer-content" oncopy="nocopy();return false;">芦苇派补充内容补充内容补充内容补充内容补充内容补充内容补充内容补充内容补充内容补充内容补充内容补充内容补充内容补充内容补充内容补充内容补充内容补充内容补充内容补充内容补充内容补充内容补充内容补充内容补充内容补充内容补充内容补充内容补充内容ECHO陈文</div>
var copyStatus = false;
var mousePosition_x = 0;
var mousePosition_y = 0;
/**
 * 获取滚动条距离顶端的距离
 * @return {}支持IE6
 */
function getScrollTop() {
    var scrollPos;
    if (window.pageYOffset) {
        scrollPos = window.pageYOffset;
    } else if (document.compatMode && document.compatMode != 'BackCompat') {
        scrollPos = document.documentElement.scrollTop;
    } else if (document.body) {
        scrollPos = document.body.scrollTop;
    }
    return scrollPos;
}
/*禁止转载*/
function nocopy() {
    if (copyStatus == true) {
        return false;
    }
    copyStatus = true;
    console.log('复制 监听成功');
    var mousePosition_top = getScrollTop();
    // console.log(window.getSelection());
    // console.log(window.getSelection().toString());
    if (window.getSelection) {
        var selection = window.getSelection();
        if (window.getSelection().toString() === '') {
            var keydownPosition_x = 0;
            var keydownPosition_y = 0;
        } else {
            var keydownPosition_x = selection.focusNode.parentElement.clientWidth / 2 + selection.focusNode.parentElement.offsetLeft;
            var keydownPosition_y = selection.focusNode.parentElement.offsetTop + 40;
        }
        //console.log(window.getSelection().toString());return false;
    } else {
        var keydownPosition_x = 0;
        var keydownPosition_y = 0;
    }
    //console.log(keydownPosition_x);
    //console.log(keydownPosition_y);
    //console.log(mousePosition_x);
    //console.log(mousePosition_y);
    mousePosition_x = mousePosition_x ? mousePosition_x : keydownPosition_x;
    mousePosition_y = mousePosition_y ? mousePosition_y + mousePosition_top + 15 : keydownPosition_y;

    $('body').append('<div class="prohibit-copy">禁止转载</div>');
    $("body .prohibit-copy").css({
        top: mousePosition_y,
        left: mousePosition_x,
    })
    return false;
}
/*点击空白处理事件*/
$(document).click(function (event) {
    $(".prohibit-copy").remove();
    mousePosition_x = 0;
    mousePosition_y = 0;
    copyStatus = false;
});

整体还不是很完美,欢迎讨论提意见

原创文章,作者:ECHO陈文,如若转载,请注明出处:https://www.luweipai.cn/html/378941/

  • 0