js实现复制页面内容自动添加版权信息文字

很多前端技术博客有这样的处理,当我们复制代码或者文章内容的时候,都会自动加上一段文本信息版权,像下面这样:

 js实现复制页面内容自动添加版权信息文字

这是如何实现的呢?

其实实现的方式很简单,可以在我们的网站页面上绑定一个copy事件,当你复制文章内容的时候,自动在剪切板文字后面加上一段版权声明就OK啦。

这里我整理出两种方式实现,皆可直接拿去使用,仅供大家参考学习。

第一种方式

function addLink() {
    var body_element = document.body;
    var selection;
    //var selection = window.getSelection();
    var blogName = '[ 码云笔记技术博客 ]'; // 此处修改成你自己网站的名称
    selection = window.getSelection() ? window.getSelection() : document.selection.createRange().text;
    if (window.clipboardData) { // Internet Explorer
        var pagelink = "\n\n 原文出自" + blogName + " 转载请保留原文链接: " + document.location.href + "";
        var copyText = selection + pagelink;
        window.clipboardData.setData("Text", copyText);
        return false;
    } else {
        var pagelink = " 原文出自" + blogName + " 转载请保留原文链接: " + document.location.href + "";
        var copyText = selection + pagelink;
        var newDiv = document.createElement('div');
        newDiv.style.position = 'absolute';
        newDiv.style.left = '-99999px';
        body_element.appendChild(newDiv);
        newDiv.innerHTML = copyText;
        selection.selectAllChildren(newDiv);
        window.setTimeout(function() {
            body_element.removeChild(newDiv);
        },
        0);
    }
}
document.oncopy = addLink;

第二种方式

// 监听整个网页的copy(复制)事件
document.addEventListener('copy',function(event) {
    // clipboardData 对象是为通过编辑菜单、快捷菜单和快捷键执行的编辑操作所保留的,也就是你复制或者剪切内容
    let clipboardData = event.clipboardData || window.clipboardData;
    // 如果未复制或者未剪切,则return出去
    if (!clipboardData) {
        return;
    }
    // Selection 对象,表示用户选择的文本范围或光标的当前位置。
    // 声明一个变量接收 -- 用户输入的剪切或者复制的文本转化为字符串
    let text = window.getSelection().toString();
    if (text) {
        // 如果文本存在,首先取消文本的默认事件
        event.preventDefault();
        // 通过调用常clipboardData对象的 setData(format, data) 方法;来设置相关文本
        // setData(format, data);参数
        // format
        // 一个DOMString 表示要添加到 drag object的拖动数据的类型。
        // data
        // 一个 DOMString表示要添加到 drag object的数据。
        clipboardData.setData('text/plain', text + '\n\n码云笔记 版权所有');
    }
});

以上代码相关参数详解

element.addEventListener(type, handle, false);
  • type: 事件触发类型,如clickkeypress等等,下面我们详细的讲讲事件类型!!
  • handle:事件处理函数,事件出发后,定义可能发生的变化!!
  • false: 表示事件冒泡模型,一般来说都是false。
lipboardData

clipboardData 属性保存了一个 DataTransfer 对象(用户剪切板的内容),这个对象可用于:

  • 描述哪些数据可以由 cut(en-US)copy(en-US) 事件处理器放入剪切板,通常通过调用 setData(format, data) 方法;
  • 获取由 paste(en-US) 事件处理器拷贝进剪切板的数据,通常通过调用 getData(format) 方法

format数据类型有:text/plaintext/uri-listdata表示要添加到剪切板的数据。

event.preventDefault()

event.preventDefault()方法阻止元素发生默认的行为。

例如:

  • 当点击提交按钮时阻止对表单的提交
  • 阻止以下URL的链接

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » js实现复制页面内容自动添加版权信息文字

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们