复制网页内容自动添加版权信息的方法(兼容IE所有版本)
现在很多网站都有复制网页内容自动添加版权信息,俗称小尾巴,比如:知乎,简书,CSDN等。
原理是监听js的oncopy
事件,阻止该事件的默认行为,并获取到用户选择的内容,然后判断内容字数,当大于某个设定的字数时,把版权信息拼接到复制的内容后面,再写入到剪贴板中。
以下实例已经过测试,IE5/7/8/9/10/11/edge全部支持,但全都只支持text格式,不支持html富文本,其中edge在开启调试控制台的时候支持html富文本,关闭则不支持,所以相当于edge还是不支持写入html到剪贴板,另外ie6未测试。
已测试Chrome/Safari/Firefox/Opera全部支持(版本就不用说了,肯定都用当前最新版本)。
测试环境:macOS 下Parallels Desktop虚拟机安装的win10,如果在真实windows下有问题请反馈!
粘贴html格式时,如果html格式不是内联样式,是无法显示出原文效果的,因为虽然复制了标签,但是没有样式也没用,只有内联样式的富文本才能显示出原文效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>复制网页内容自动添加版权信息(兼容所有IE版本)</title>
</head>
<body>
已测试IE5/7/8/9/10/11/edge,全部支持,但只有edge支持html格式,其他ie版本只支持text格式,ie6未测试
已测试Chrome/Safari/Firefox/Opera全部支持(版本就不用说了,肯定都用当前最新版本)
分别复制到txt和富文本查看效果
<div id="answer">测试数据1<b>测试</b></div>
<p style="color:red">测试数据2<span style="color:yellow;background-color: #ccc">测试数据3</span></p>
这是大段文字,为了超过120字,这是大段文字,为了超过120字,这是大段文字,为了超过120字,这是大段文字,为了超过120字,这是大段文字,为了超过120字,这是大段文字,为了超过120字,这是大段文字,为了超过120字,这是大段文字,为了超过120字,这是大段文字,<p style="color:red">为了超过120字<span style="color:yellow;background-color: #ccc">测试数据3</span></p>
这是大段文字,为了超过120字,这是大段文字,为了超过120字,这是大段文字,为了超过120字,这是大段文字,为了超过120字,这是大段文字,这是大段文字,为了超过120字,这是大段文字,为了超过120字,这是大段文字,为了超过120字,这是大段文字,为了超过120字,这是大段文字,为了超过120字,这是大段文字,为了超过120字,这是大段文字,为了超过120字,这是大段文字,为了超过120字,这是大段文字,为了超过120字,
<script>
//获取IE版本
function getIeVersion() {
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
if(isIE) {
var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
reIE.test(userAgent);
var fIEVersion = parseFloat(RegExp["$1"]);
if(fIEVersion > 6){
return fIEVersion;
}else{
return 6;
}
} else if(isEdge) {
return 'edge';//edge
} else if(isIE11) {
return 11; //IE11
}else{
return -1;//不是ie浏览器
}
}
//自定义设置剪贴板内容
function setClipboardText(event, maxCount){
var IEVersion = getIeVersion();
//阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交)。
if(IEVersion>-1 && IEVersion!='edge' && IEVersion<11){
//IE
window.event.returnValue = false;
}else{
event.preventDefault();
}
var textData = '';
var htmlData = '';
if(IEVersion>-1 && IEVersion!='edge' && IEVersion<11){
//低版本IE
//选择的文本
textData = document.selection.createRange().text;
//选择的html
htmlData = document.selection.createRange().htmlText;
}else{
var selectRange = window.getSelection().getRangeAt(0);
//选择的文本
textData = selectRange.toString();
//选择的html
var node = document.createElement('div');
node.appendChild(selectRange.cloneContents());
htmlData = node.innerHTML;
}
//如果复制的内容超过maxCount个字符则添加版权信息
if(textData.length >= maxCount){
var url = window.location.href;
//文章类型:original原创、repirnt转载,如果你的博客有这个要求,则根据你博客
//的具体判断方法,来设置article_type的值,这里我就直接写死原创original了
var article_type = 'original';
// var article_type = 'reprint';
var copyright = '';
if(article_type=='original'){
copyright = '本文为博主原创文章,转载请附上博文链接!'
}else{
copyright = '本文为转载文章,版权归原作者所有,转载请附上博文链接!'
}
//附加到复制内容后面的版权内容
var appendText =
'\n------------------------------------\n'
+ '作者:Bruce Xie\n'
+ '来源:Bruce\'s Blog\n'
+ '原文:' + url + '\n'
+ copyright + '\n\n';
//文本格式附加版权信息
textData += appendText;
//html格式附加版权信息
htmlData = '<div>' + htmlData + appendText.replace(/\n/g, '<br>'); + '</div>';
}
//注意,IE11虽然大部分功能已经符合w3c标准,但是仍然只能使用window.clipboardData,
//而无event.clipboardData,至于edge那已经不是IE了,完全遵循w3c标准(使用IE11测试)
//使用edge模拟IE11,却又不支持window.clipboardData,反而支持event.clipboardData,报错
//SCRIPT5007: Unable to get property 'createRange' of undefined or null reference,
//但我们以真实IE11为准,所以用edge模拟的IE11报错是正常的
//非常怪异的是,edge如果用window.clipboardData则正常,但如果用event.clipboardData,
//则开启控制台调试的时候可以,但关闭控制台就不行,关闭控制台复制后,再开启控制台,可以看到
//控制台写着SCRIPT5: SCRIPT5: Access is denied. 可见edge还是没完全开放event.clipboardData
if(IEVersion>-1 && IEVersion!='edge'){
//IE
return window.clipboardData.setData("text", textData);
} else {
//setData(剪贴板格式, 数据) 给剪贴板赋予指定格式的数据。返回 true 表示操作成功。
//注意html与普通文本两种都要设置,如果只设置html,你可以往有道云笔记
//之类的富文本编辑器里粘贴,但如果你粘贴到纯文本编辑器,比如sublime就
//无法粘贴内容,所以还要设置text/plain版本(即普通文本)
event.clipboardData.setData("text/html", htmlData);
event.clipboardData.setData("text/plain",textData);
}
}
//监听copy事件(为了兼容IE,就不用addEventListener了)
document.body.oncopy = function(e) {
setClipboardText(e, 120);
}
</script>
</body>
</html>
实例演示
本文参考:https://blog.csdn.net/u010071211/article/details/82900159
觉得文章对你有用的话鼓励一下我吧
棒!
谢谢!