【分享】JS如何为复制的Web文本添加其他信息
看到了两篇关于这题的讨论,简单的记录一下!o(* ̄▽ ̄*)ブ
1. stackoverflow , How to add extra info to copied web text
2. 黑客派,https://hacpai.com/article/1510544423932
第一条使用两种方法对文章进行粘贴追加信息~~~
方法一:
①监听copy事件,然后将隐藏盒子中的信息添加到其中;
②结合window.selection()方法;
③浏览器兼容情况是主流浏览器IE8以上;
④线上demo http://jsfiddle.net/jp6nhmxf/ ;
⑤使用:复制一段文本再粘贴就会出现 pagelink中的内容 。
主要JS code
function addLink() {
//Get the selected text and append the extra info
var selection = window.getSelection(),
pagelink = '\n\n Read more at: ' + document.location.href,
copytext = selection + pagelink,
newdiv = document.createElement('div'); //hide the newly created container
newdiv.style.position = 'absolute';
newdiv.style.left = '-99999px'; //insert the container, fill it with the extended text, and define the new selection
document.body.appendChild(newdiv);
newdiv.innerHTML = copytext;
selection.selectAllChildren(newdiv); window.setTimeout(function () {
document.body.removeChild(newdiv);
}, 100);
} document.addEventListener('copy', addLink);
方法二:
①监听copy事件,然后修改剪贴板中的内容,也就是clipboard使用;
②结合window.clipboardData.
setData()方法;
③浏览器兼容情况是IE4以上(换言之只针对于IE);
④线上demo http://jsfiddle.net/m56af0je/ (IE模式下起效);
主要JS code
function addLink(event) {
event.preventDefault(); var pagelink = '\n\n Read more at: ' + document.location.href,
copytext = window.getSelection() + pagelink; if (window.clipboardData) {
window.clipboardData.setData('Text', copytext);
}
} document.addEventListener('copy', addLink);
⑤另外疑问点来了,使用clipboard能在其他浏览器(比如谷歌/火狐/safari)中工作吗?
主要JS code
function addLink(event) {
event.preventDefault(); var pagelink = '\n\n Read more at: ' + document.location.href,
copytext = window.getSelection() + pagelink; (event.clipboardData || window.clipboardData).setData('Text', copytext);
} document.addEventListener('copy', addLink);
区别在 window.clipboarddata <--> event.clipboardData
亲测在兼容模式、极速模式、谷歌、火狐、IE等浏览器中均测有效!
第二条使用的方法跟第一条类似~~~
主要JS code
/**
* @description 添加版权
*/
const addCopyright = () => {
const genCopy = () => {
return [
'',
'',
'作者:Vanessa',
'链接 [文章复制添加版权](https://hacpai.com/article/1510544423932) ',
'来源:黑客派',
'著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。',
]
} $('.content-reset').on('copy', function (event) {
if (!window.getSelection) {
return
} let copyString = window.getSelection().toString() if (copyString.length < 128) {
return
} if ('object' === typeof event.originalEvent.clipboardData) {
event.originalEvent.clipboardData.setData('text/html', copyString + genCopy().join(''))
event.originalEvent.clipboardData.setData('text/plain', copyString + genCopy().join('\n'))
event.preventDefault()
return
} $('body').append(`${copyString}${genCopy().join('')}`)
window.getSelection().selectAllChildren($('#pipeFixCopy')[0])
setTimeout(function() {
$('#pipeFixCopy').remove()
}, 200)
})
}
找一个空白地方复制粘贴测试,~~本人只在极速模式下测通过,其他未测~~
敬请留意~~
~~~抱拳撒花*★,°*:.☆( ̄▽ ̄)/$:*.°★* 。~~~
【分享】JS如何为复制的Web文本添加其他信息的更多相关文章
- JS代码格式化排版工具,web文本编辑器
js格式化代码工具:http://www.cnblogs.com/blodfox777/archive/2008/10/09/1307462.html web文本编辑器 :http://www.div ...
- web文本划线的极简实现
开篇 文本划线是目前逐渐流行的一个功能,不管你是小说阅读网站,还是卖教程的的网站,一般都会有记笔记或者评论的功能,传统的做法都是在文章底部加一个评论区,优点是简单,统一,缺点是不方便对文章的某一段或一 ...
- Slideout.js – 触摸滑出式 Web App 导航菜单
Slideout.js 是为您的移动 Web 应用开发的触摸滑出式的导航菜单.它没有依赖,自由搭配简单的标记,支持原生的滚动,您可以轻松地定制它.它支持不同的 CSS3 转换和过渡.最重要的是,它只是 ...
- Heatmap.js v2.0 – 最强大的 Web 动态热图
Heatmap 是用来呈现一定区域内的统计度量,最常见的网站访问热力图就是以特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区域的图示.Heatmap.js 这个 JavaScript 库可以实现 ...
- js 对象深复制,创建对象和继承
js 对象深复制,创建对象和继承.主要参考高级编程第三版,总结网上部分资料和自己的代码测试心得.每走一小步,就做一个小结. 1.对象/数组深复制 一般的=号传递的都是对象/数组的引用,如在控制台输入 ...
- 通过Web Api 和 Angular.js 构建单页面的web 程序
通过Web Api 和 Angular.js 构建单页面的web 程序 在传统的web 应用程序中,浏览器端通过向服务器端发送请求,然后服务器端根据这个请求发送HTML到浏览器,这个响应将会影响整个的 ...
- 前端分享----JS异步编程+ES6箭头函数
前端分享----JS异步编程+ES6箭头函数 ##概述Javascript语言的执行环境是"单线程"(single thread).所谓"单线程",就是指一次只 ...
- 微信分享JS接口失效说明及解决方案
关键字:微信分享 JS 失效 分享到朋友圈 微信分享JS接口目前已失效,以前可以自定义分享的标题.描述.图片.链接地址在微信6.0.2版本中失效. 官方回复如下: 旧版的获取分享状态及设置分享内容的 ...
- c#调用js,以及js调用C#里的函数, c#自己生成js代码,实现对web的控制
using mshtml;using System;using System.Collections.Generic;using System.Linq;using System.Security.P ...
随机推荐
- [转载非常好的文章]JLink+GDBServer调试S3C6410裸板的初始化代码 For OK6410开发板
要调试裸板,有两种初始化方法,一个是用烧好的uboot初始化,再有就是直接用JLink+GDBServer初始化.代码参考了网上的资料,根据手头的OK6410开发板做了修改.整体代码如下: # Con ...
- Java 中 this 和 super 的用法总结
his this 是自身的一个对象,代表对象本身,可以理解为:指向对象本身的一个指针. this 的用法在 Java 中大体可以分为3种: 1.普通的直接引用 这种就不用讲了,this 相当于是指向当 ...
- IP通信基础的第一个星期
IP通信基础不仅是很多专业课程的基础,同时学好它,在以后很多工作上都可以运用到,有网络工程师.通信工程师等等,当然,有些证书也会涉及到IP通信基础,有网络中级高级 CCNA等等. 那么,学好IP通信基 ...
- Typora学习笔记
Typora学习笔记 标题 用"#"表示 快捷键:ctrl+1,2,3,4,5 居中 居中可用center标签 强调 使用强调 加粗 使用加粗 下划线 使用u标签:下划线 有序列表 ...
- python中的列表
1. 列表是什么,他可以用来做什么呢?当你存在这样的疑问,就往下看吧:) 列表是由一系列按特定顺序排列的元素组成的.在Python中,用[]来表示列表,并用逗号来分隔其中的元素. 我们可以创建包含字 ...
- 《视觉SLAM十四讲课后作业》第二讲
1.设线性⽅程 Ax = b,在 A 为⽅阵的前提下,请回答以下问题:1. 在什么条件下,x 有解且唯⼀? 非齐次线性方程在A的秩与[A|B]的秩相同时方程有解,当R(A)=R(A,B)=n时方程有唯 ...
- EDK II代码实例之Variable
EFI_STATUS Status = EFI_SUCCESS; EFI_GUID OemOSTypeGuid = {0xd06a0bc7, 0x9feb, 0x4cbb, 0xbd, 0x78, 0 ...
- 14: InfluxDB+Grafana打造大数据监控利器
参考博客: https://www.cnblogs.com/davidwang456/p/7795263.html
- algs4 使用 DrJava 编写 Hello World on Windows
前阶段读了 Yinwang 的博客, 对 Scheme and Lisp 产生了很大的兴趣, 用 学生模式的 DrRacket IDE一步一步开始实现 How to Design Programs. ...
- bzoj 3597 [Scoi2014] 方伯伯运椰子 - 费用流 - 二分答案
题目传送门 传送门 题目大意 给定一个费用流,每条边有一个初始流量$c_i$和单位流量费用$d_i$,增加一条边的1单位的流量需要花费$b_i$的代价而减少一条边的1单位的流量需要花费$a_i$的代价 ...