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

只兼容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. 兼容ie8 rgba()用法 滤镜filter的用法

    原文  http://blog.csdn.net/westernranger/article/details/40836861 今天遇到了一个问题,要在一个页面中设置一个半透明的白色div.这个貌似不 ...

  2. PyCharm 4.5.4 环境配置

    1.去掉“自动保存功能” pycharm默认是自动保存的,习惯自己按 ctrl + s 的可以进行如下设置: 菜单File -> Settings... -> Appearance &am ...

  3. Dynamic CRM 2013学习笔记(二十二)插件里调用WCF服务

      1. 添加service:     2.调用WCF BasicHttpBinding myBinding = new BasicHttpBinding(); myBinding.Name = &q ...

  4. iis php5.3.8 默认文档无效 404 - 找不到文件或目录

    环境:WIN2008 R2 IIS7.5 / .NET4.X 新开1站点,使用php(5.3.8),默认首页文档已设置为index.php,网站所在目录的网站运行时用户权限正确,应用程序池是asp.n ...

  5. C#设计模式(8)——桥接模式(Bridge Pattern)

    一.引言 这里以电视遥控器的一个例子来引出桥接模式解决的问题,首先,我们每个牌子的电视机都有一个遥控器,此时我们能想到的一个设计是——把遥控器做为一个抽象类,抽象类中提供遥控器的所有实现,其他具体电视 ...

  6. 曲演杂坛--为什么SELECT语句会被其他SELECT阻塞?

    很多刚入门的DBA在捕获阻塞得时候,会问这么一个问题“为什么这个SELECT语句被那个SELECT语句阻塞了,难道不是共享锁么?” 让我们来做个小测试,首先准备一些测试数据: --========== ...

  7. 从源代码分析Universal-Image-Loader中的线程池

    一般来讲一个网络访问就需要App创建一个线程来执行,但是这也导致了当网络访问比较多的情况下,线程的数目可能积聚增多,虽然Android系统理论上说可以创建无数个线程,但是某一时间段,线程数的急剧增加可 ...

  8. linux tar order

    http://blog.csdn.net/imyang2007/article/details/7634470 把常用的tar解压命令总结下,当作备忘: tar -c: 建立压缩档案-x:解压-t:查 ...

  9. WeUI 为微信 Web 服务量身设计-h5前端框架

    WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一.包含button.cell.dialog. progress. toas ...

  10. Jenkins + GitHub + fir-cli 一行命令从源码到fir.im

    上周简书作者宣X_x  分享了一篇文章--用Jenkins+GitHub+Xcode+fir搭了一个持续集成环境,整个记录见(传送门). _______ 其实fir.im为我们提供了一个更简单的方式: ...