公司官网有这样需求,写好后,备份以后留用。

只兼容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实现剪切板添加网站版权、来源的更多相关文章

  1. JS访问剪切板中的图片

    google出来一个html2canvas,它利用canvas来渲染读取的DOM树,也就是说它只能截取document里的内容,如果要像qq截图那样,应该怎么做?用过百度的Ueditor编辑器的朋友都 ...

  2. JS从剪切板里粘贴图片

    功能需求:在网页中,Ctrl+V,把系统剪切板的图片(比如QQ截图)进行粘贴.显示.上传...,提高用户体验. 参考链接:https://ruby-china.org/topics/17266 git ...

  3. js修改剪切板内容的方法

    代码如下: //绑定在了body上,也可以绑定在其他可用元素行,但是不是所有元素都支持copy事件. $(document.body).bind({ copy: function(e) {//copy ...

  4. js 操作剪切板

    1.IE浏览器 window.clipboardData: setData() //设置值 getData()//获取值 clearData()//删除值 /******* ** IE 浏览器下支持w ...

  5. Javascript操作剪切板数据(支持IE、Chrome、360、搜狗),亲测!

    clipboarddata只能在IE浏览器中使用,在chrome下会提示对象未定义!以下的方法支持IE.Chrome.360.搜狗等浏览器,其它浏览器还未验证. <!DOCTYPE html&g ...

  6. 简单实现兼容各大浏览器的js复制内容到剪切板

    因为网站文章需要提供几个按钮,单击后实现复制文章内容到剪贴板. 在网上搜索了很多内容,发现都比较乱这里自己整理下,分享给大家 效果图如下: 之前使用的是window.clipboardData.set ...

  7. 使用clipboard.js复制页面内容到剪切板

    最近在做一个的智能客服Web端浏览器应用,其中有一项需求是客户在获取系统返回的 答案后点击“复制答案”按钮将答案复制到系统剪切板.本以为这是一个小case,但是发现如果 要对各种主流浏览器都有良好的兼 ...

  8. js 将内容复制到剪切板上

    clipboard是将内容复制到电脑的剪切板上,要引入clipboard.js //将'data-clipboard-text' 样式添加到指定的元素上 $("#effects") ...

  9. clipboard.js 实现web端---> 复制到剪切板功能

    package.json 中: 添加clipboard 依赖 "dependencies": { "vue": "^2.2.2", &quo ...

随机推荐

  1. C语言 队列 链式结构 实现

    一个C语言链式结构实现的队列 mQueue (GCC编译). /** * @brief C语言实现的链式队列 * @author wid * @date 2013-10-31 * * @note 若代 ...

  2. Openstack Murano(kilo)二次开发之添加Volume

    Openstack Murano(kilo)二次开发之添加Volume 欢迎转载,转载请注明出处:http://www.cnblogs.com/fmnisme/p/openstack_murano_a ...

  3. 使用ExceptionHandlingScope进行高效的SharePoint CSOM编程

    异常处理 在我们使用SharePoint API的时候,获取某些对象的时候,可能会出异常,那么CSOM如何处理这种情况呢. 我们在获取某个List的时候,代码如下: using (ClientCont ...

  4. paip.代码生成器数据源格式最佳实践

    paip.代码生成器数据源格式最佳实践 需要满足几个条件. 1.基于文本 2.容易的编辑.. 3,容易的代码解析. 这样,常用的设计工具powerdesign cdm pdm就排除兰...cdm虽然是 ...

  5. iOS-项目打包为ipa文件

    最近自己做的一个项目,由于app store发布流程比较复杂,且审核周期较长,客户希望提前能看到产品,所以我先给自己的项目打包成一个ipa文件(类似Android的apk安装包),然后发布在" ...

  6. Alcatraz的安装和使用

    一.简单说明 Alcatraz 是一款 Xcode的插件管理工具,可以用来管理XCode的 插件.模版以及颜色配置的工具. 二.如何安装 1.github地址:https://github.com/a ...

  7. 正在开发纯BS的可在线编辑内容的电子病历编辑器

    在线电子病历编辑器功能预览,支持Firefox/Chrome/Opera/UC/IE/Safari.演示地址 http://www.dcwriter.cn:9090/ 在WINFORM.NET中的效果 ...

  8. GO語言基礎教程:數據類型,變量,常量

    GO類似PHP,每行的結尾要加分號來結束,不同點在於GO對此並不強制,這一點又像javascript,另外GO的語句塊是用一對大括號來包裹的,但是go要求左大括號必須要在語句的結尾處,不能在行首出現左 ...

  9. NoteExpress 自定义参考文献输出样式

    最近在写硕士论文,样式中没有符合要求的,于是就自己来编辑下样式文件,下文是网上搜集的关于自定义参考文献的一篇教程,可以参考. 一.分隔符|和连接符*的使用 (1)连接符 * 主要作用是“建立依赖关系” ...

  10. 在cxf中使用配置避免增加字段导致客户端必须更新、同步实体属性的问题

    在使用cxf实现webservice时,经常碰到的问题就是如果在服务端,修改了一个接口的签名实现,如增加一个字段,或者删除一个字段.在这种情况下,在默认的配置中,就会报以下的错误信息: org.apa ...