JS复制网页内容自带版权信息
2017-09-27 本文已影响59人
Cherry9507
前言：在了解此操作之前，首先要理解剪贴板,Range对象，getSelection（），简单介绍
1.windowwindow.getSelection() 返回一个Selection对象，表示用户选择的文本范围或光标的当前位置。
2.Range对象
Range对象代表页面上一段连续的区域，通过Range对象可以获取或者修改页面上任何区域的内容。也可以通过Range的方法进行复制和移动页面任何区域的元素。
在Js的document文档中有一个方法用来创建一个Range对象，代码如下：
var range = document.createRange();
可以通过selection对象的getRangeAt方法来获取selection对象的某个Range对象，代码如下：
window.getSelection().getRangeAt(0)
//getRangeAt方法有一个参数index，代表该Range对象的序列号；我们可以通过Selection对象的rangeCount参数的值判断用户是否选取了内容；
//getRangeAt(0)返回对基于零的数字索引与传递参数匹配的选择对象中的范围的引用。对于连续选择，参数应为零。
cloneContents()
可以克隆选中Range的fragment并返回改fragment。这个方法类似extractContents()，但不是删除，而是克隆,代码如下：
var node = document.createElement('div');
node.appendChild（window.getSelection().getRangeAt(0).cloneContents()）
//这样我们就简单的一行代码直接克隆了你鼠标所选择的内容
3.剪贴板操作
window.clipboardData的作用是在页面上将需要的东西复制到剪贴板上，提供了对于预定义的剪贴板格式的访问，以便在编辑操作中使用。
三个方法（ sDataFormat:"text","url","file","html","image"，sData: 剪贴数据）
- clearData(sDataFormat) 删除剪贴板中指定格式的数据。sDataFormat:"text","url"
- getData(sDataFormat) 从剪贴板获取指定格式的数据。 sDataFormat:"text","url"
- setData(sDataFormat, sData) 给剪贴板赋予指定格式的数据。
返回 true 表示操作成功。
demo代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div id="answer">测试数据<b>test</b></div>
<script>
function setClipboardText(event){
event.preventDefault();//阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）。
var node = document.createElement('div');
//对documentfragment不熟，不知道怎么获取里面的内容，用了一个比较笨的方式
node.appendChild(window.getSelection().getRangeAt(0).cloneContents());
//getRangeAt(0)返回对基于零的数字索引与传递参数匹配的选择对象中的范围的引用。对于连续选择，参数应为零。
var htmlData = '<div>著作权归作者所有。<br />'
+ '商业转载请联系作者获得授权，非商业转载请注明出处。<br />'
+ '作者：tiantian<br />链接：http://segmentfault.com/u/tiantian_<br />'
+ '来源：segmentfault<br /><br />'
+ node.innerHTML
+ '</div>';
var textData = '著作权归作者所有。\n'
+ '商业转载请联系作者获得授权，非商业转载请注明出处。\n'
+ '作者：tiantian\n链接：http://segmentfault.com/u/tiantian_\n'
+ '来源：segmentfault\n\n'
+ window.getSelection().getRangeAt(0);
if(event.clipboardData){
event.clipboardData.setData("text/html", htmlData);
//setData(剪贴板格式, 数据) 给剪贴板赋予指定格式的数据。返回 true 表示操作成功。
event.clipboardData.setData("text/plain",textData);
}
else if(window.clipboardData){ //window.clipboardData的作用是在页面上将需要的东西复制到剪贴板上，提供了对于预定义的剪贴板格式的访问，以便在编辑操作中使用。
return window.clipboardData.setData("text", textData);
}
};
var answer = document.getElementById("answer");
answer.addEventListener('copy',function(e){
setClipboardText(e);
});
</script>
</body>
</html>
\\ demo已放到鄙人github，也可自取：https://github.com/JOSIE1988/ClipBoardData，欢迎star
文章会持续更新，一起进步。 如果本文对你有帮助，欢迎点赞~
