关注互联网应用及运维技术的个人博客

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

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

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

js 里有一个oncopy 可以监听文本复制,需要注意的是oncopy 可以监听到三种情况

按下 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;">补充内容</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;
});
赞(0)
未经允许不得转载:飞天狒狒 » javascript 使用oncopy 模拟知乎禁止转载,禁止复制

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址