js实现复制页面内容自动添加版权信息文字
微wx笑
2022-10-06【前端开发】
0
0关键字：
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: 事件触发类型，如click，keypress等等，下面我们详细的讲讲事件类型！！handle:事件处理函数，事件出发后，定义可能发生的变化！！false: 表示事件冒泡模型，一般来说都是false。
lipboardData
clipboardData 属性保存了一个 DataTransfer 对象（用户剪切板的内容），这个对象可用于：
描述哪些数据可以由
cut(en-US)和copy(en-US)事件处理器放入剪切板，通常通过调用setData(format, data)方法；获取由
paste(en-US)事件处理器拷贝进剪切板的数据，通常通过调用getData(format)方法
format数据类型有：text/plain，text/uri-list。data表示要添加到剪切板的数据。
event.preventDefault()
event.preventDefault()方法阻止元素发生默认的行为。
例如：
当点击提交按钮时阻止对表单的提交
阻止以下URL的链接
转自：https://www.mybj123.com/11750.html
本文为转载文章，版权归原作者所有，不代表本站立场和观点。
