JS实现剪切板添加网站版权、来源
公司官网有这样需求,写好后,备份以后留用。
只兼容chrome、firefox、IE9+等主流浏览器。
// https://developer.mozilla.org/en-US/docs/Web/Events/copy
// https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent/ClipboardEvent
// https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection
(function (window, document, undefined) {
if (!window.getSelection) return;
//获取选中的HTML
var getSelectedContents = function () {
if (window.getSelection) { //chrome、firefox
var range = window.getSelection().getRangeAt();
var container = document.createElement('div');
container.appendChild(range.cloneContents());
return container.innerHTML;
//return document.getSelection(); //只复制文本
} else if (document.selection) { //IE
return document.selection.createRange().htmlText;
//return document.selection.createRange().text; //只复制文本
}
};
document.querySelector("body").addEventListener("copy", function() {
var selection = window.getSelection(),
url = location.href,
elem = document.createElement("div");
elem.innerHTML = getSelectedContents() + "<br/>" + "本文转自:" + url;
elem.cssText = "position:absolute;left:-99999px;";
document.querySelector("body").appendChild(elem);
selection.selectAllChildren(elem);
setTimeout(function () {
elem.remove();
}, );
});
})(window, document);
JS实现剪切板添加网站版权、来源的更多相关文章
- JS访问剪切板中的图片
google出来一个html2canvas,它利用canvas来渲染读取的DOM树,也就是说它只能截取document里的内容,如果要像qq截图那样,应该怎么做?用过百度的Ueditor编辑器的朋友都 ...
- JS从剪切板里粘贴图片
功能需求:在网页中,Ctrl+V,把系统剪切板的图片(比如QQ截图)进行粘贴.显示.上传...,提高用户体验. 参考链接:https://ruby-china.org/topics/17266 git ...
- js修改剪切板内容的方法
代码如下: //绑定在了body上,也可以绑定在其他可用元素行,但是不是所有元素都支持copy事件. $(document.body).bind({ copy: function(e) {//copy ...
- js 操作剪切板
1.IE浏览器 window.clipboardData: setData() //设置值 getData()//获取值 clearData()//删除值 /******* ** IE 浏览器下支持w ...
- Javascript操作剪切板数据(支持IE、Chrome、360、搜狗),亲测!
clipboarddata只能在IE浏览器中使用,在chrome下会提示对象未定义!以下的方法支持IE.Chrome.360.搜狗等浏览器,其它浏览器还未验证. <!DOCTYPE html&g ...
- 简单实现兼容各大浏览器的js复制内容到剪切板
因为网站文章需要提供几个按钮,单击后实现复制文章内容到剪贴板. 在网上搜索了很多内容,发现都比较乱这里自己整理下,分享给大家 效果图如下: 之前使用的是window.clipboardData.set ...
- 使用clipboard.js复制页面内容到剪切板
最近在做一个的智能客服Web端浏览器应用,其中有一项需求是客户在获取系统返回的 答案后点击“复制答案”按钮将答案复制到系统剪切板.本以为这是一个小case,但是发现如果 要对各种主流浏览器都有良好的兼 ...
- js 将内容复制到剪切板上
clipboard是将内容复制到电脑的剪切板上,要引入clipboard.js //将'data-clipboard-text' 样式添加到指定的元素上 $("#effects") ...
- clipboard.js 实现web端---> 复制到剪切板功能
package.json 中: 添加clipboard 依赖 "dependencies": { "vue": "^2.2.2", &quo ...
随机推荐
- ubuntn下 nginx+phpstorm 中配置xdebug调试
xdebug安装和配置说明,主要用于个人学习记录. 一.echo phpinfo(); 搜素xdebug,若未搜素到,则标识未安装或安装失败. 二.拷贝步骤1中输出的所有结果.访问http://xde ...
- C# 截取字符串方法(包含中英混合)
private string GetByteString(string center, int maxlen, string endStr) { , (center.Length < maxle ...
- AutoMapper指定列名进行映射
有了AutoMapper,就再也不用进行手工一对一的从IDataReader到实体字段的赋值.这篇博文是一个实际案例的记录. 实体类型定义如下: public class UploadImage { ...
- kali linux 系列教程之metasploit 连接postgresql可能遇见的问题
kali linux 系列教程之metasploit 连接postgresql可能遇见的问题 文/玄魂 目录 kali linux 下metasploit 连接postgresql可能遇见的问题. ...
- C#中的ThenBy是如何实现的
C#中给继承自IEnumerable的对象(最熟知的就是List了)提供了很丰富的扩展方法,涉及列表操作的方方面面.而扩展方法ThenBy就是很有意思的一个,它的实现也很巧妙. 如果有这样的一个Tea ...
- 大数据并行计算利器之MPI/OpenMP
大数据集群计算利器之MPI/OpenMP ---以连通域标记算法并行化为例 1 背景 图像连通域标记算法是从一幅栅格图像(通常为二值图像)中,将互相邻接(4邻接或8邻接)的具有非背景值的像素集合提取出 ...
- 题目一:一张纸的厚度大约是0.08mm,对折多少次之后能达到珠穆朗玛峰的高度(8848.13米)?
题目一:一张纸的厚度大约是0.08mm,对折多少次之后能达到珠穆朗玛峰的高度(8848.13米)? //一张纸的厚度大约是0.08mm,对折多少次之后能达到珠穆朗玛峰的高度(8848.13米 doub ...
- android: 实现跨程序数据共享
简单起见,我们还是在上一章中 DatabaseTest 项目的基础上继续开发,通过内容提供器 来给它加入外部访问接口. 打开 DatabaseTest 项目,首先将 MyDatabaseHelper ...
- 转:Directshow开发的一些例子
DirectShow Filter 开发典型例子分析 --字幕叠加 (FilterTitleOverlay)1 本文分析一下<DirectShow开发指南>中的一个典型的Transform ...
- SCN试验之二 checkpoin scn 与数据库scn的关系
oracle11g 观察数据库scn: SQL> select dbms_flashback.get_system_change_number from dual; GET_SYSTEM_CHA ...