js监听页面copy事件添加版权信息
2024-09-02 01:16:45
个人博客 地址:http://www.wenhaofan.com/article/20180921103346
1.介绍
当页面需要做版权保护时,比如当用户copy我们网站的文章时,我们会希望在他copy的文章内容中添加一些版权信息,例如我们的网站地址。
2.实现方法
首先我们需要捕捉到用户的copy事件,这里我们可以使用document.oncopy来绑定触发事件,此时执行复制操作时将会触发addLink方法,addLink方法中将包含所有处理步骤
document.oncopy = addLink;
捕捉到copy事件后我们还需要在addLink事件执行一些操作
function addLink() {
var body_element = document.body;
var selection;
selection = window.getSelection(); var locationHref=document.location.href;
var appendLink="\r\n\r\n 原文出自[ 范文皓的个人博客 ] 转载请保留原文链接: <a href='"+locationHref+"'>"+locationHref+"</a>";
if (window.clipboardData) { // Internet Explorer
var copytext = selection + appendLink;
window.clipboardData.setData ("Text", copytext);
return false;
} else {
var copytext = selection + appendLink;
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);
}
}
在上面的代码中使用了两种方法来兼容各种浏览器
1.直接通过浏览器接口操作剪切板,该方法在chrome firefox等版本较高的ie中可用
2.修改用户选中的内容 该方法基本上兼容所有浏览器
当浏览器不能直接操作剪切板时便会使用第二种方法来确保追加生效
3.完整代码
function addLink() {
var body_element = document.body;
var selection;
selection = window.getSelection(); var locationHref=document.location.href;
var appendLink="\r\n\r\n 原文出自[ 范文皓的个人博客 ] 转载请保留原文链接: <a href='"+locationHref+"'>"+locationHref+"</a>";
if (window.clipboardData) { // Internet Explorer
var copytext = selection + appendLink;
window.clipboardData.setData ("Text", copytext);
return false;
} else {
var copytext = selection + appendLink;
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;
最新文章
- 工厂模式/factory模式/创建型模式
- HT图形组件设计之道(二)
- 装过photoshop后出现configuration error
- 看来是要改用Gecko的节奏,放弃Awesomium吧
- 【转载】php程序员:从1.5K到18K 一个程序员的5年成长之路
- 利用Vagrant搭建多平台环境
- Unigui有用的网址
- [Swift]LeetCode84. 柱状图中最大的矩形 | Largest Rectangle in Histogram
- Hadoop第一式:配置Linux环境
- python:3种爬虫的优缺点
- C/S和B/S 《JavaWeb开发王者归来》学习笔记
- DDR3控制
- 【Gearman学习笔记】分布式处理入门
- web api post/put空值问题以及和angular的冲突的解决
- python之selenium调用js(execute_script)
- tomcat端口被占用如何解决
- Linux系统开机启动时的工作原理
- Android 珍藏(三)
- VS2017 Use Git Push To TFS2018 Failure
- vim编辑下几个退出保存的命令