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 ...
随机推荐
- 【概念笔记】JAVA基础 - part2
IT`huhiu前言录 这是续JAVA基础 - part1 链接http://www.cnblogs.com/ithuhui/p/5922067.html的. 笔记慢慢在修改和补充 JAVA里面重要的 ...
- Orleans 高级特性-目录
这里将介绍一些Orleans的高级特性,适合对Orleans已经有不少了解的用户,先列出一个索引,博客文章慢慢补充 1.使用Immutable 优化复制 2.自定义序列化 (待完成) 3.可重入 Gr ...
- 通信服务器群集——跨服务器通信Demo(源码)
对于一些基于TCP Socket的大型C/S应用来说,能进行跨服务器通信可能是一个绕不开的功能性需求.出现这种需求的场景类似于下面描述的这种情况. 假设,我们一台TCP应用服务器能同时承载10000人 ...
- Homebrew- MAC上的包管理利器
包管理器是神马东西?让我们看看wikipedia上的介绍. In software, a package management system, also called package manager, ...
- Excel Interactive View - 让页面表格的功能更强大
MS Office Excel Services提供了一个非常强大的功能,允许你只需要在页面上添加非常少量的JS references,就可以让你在页面上将表格的内容以Excel图表的方式呈现.这里是 ...
- Atitit.如何避免公司破产倒闭的业务魔咒
Atitit.如何避免公司破产倒闭的业务魔咒 1. 大型公司的衰落或者倒闭破产案例1 1.1. 摩托罗拉1 1.2. 诺基亚2 1.3. sun2 2. 为什么他们会倒闭?? 常见的一些倒闭元素2 2 ...
- .NET Remoting学习笔记(一)概念
目录 .NET Remoting学习笔记(一)概念 .NET Remoting学习笔记(二)激活方式 .NET Remoting学习笔记(三)信道 背景 自接触编程以来,一直听过这个名词Remotin ...
- jQuery的简单入门练习
<html> <head> <meta charset="utf-8"> <title>jQuery的练习</title> ...
- Leetcode 198 House Robber 动态规划
题意是强盗能隔个马抢马,看如何获得的价值最高 动态规划题需要考虑状态,阶段,还有状态转移,这个可以参考<动态规划经典教程>,网上有的下的,里面有大量的经典题目讲解 dp[i]表示到第i匹马 ...
- 通过weburl 启动windows程序
1. 注册表修改 建立一个reg文件 执行导入 以RunLocal协议为例子 Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\RunL ...