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的链接
1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » js实现复制页面内容自动添加版权信息文字

发表评论

前端开发相关广告投放 更专业 更精准

立即查看 联系我们