知乎上复制回答,剪贴板里自动加上版权出处的技术js如何实现?

知乎上复制回答,剪贴板里自动加上版权出处的技术js如何实现?
关注者
319
被浏览
6105

6 个回答

简单说一下如何一步一步找到答案吧。

首先打开Chrome开发者工具,找到Timeline标签页。

点击记录按钮,到页面上复制一份答案,再次回来结束记录。看到如下Timeline信息:

功夫不负有心人,找到一个copy事件,进一步查看

点击脚本链接,跳转到相关脚本
格式化代码如下,基本上就看明白了。

以下链接你可能感兴趣:
Chrome Timeline文档 developer.chrome.com/de
MDN copy Event copy - Event reference
var gz = function (a, b, c) {
function d(a, b) {
return ['著作权归作者所有。',
'商业转载请联系作者获得授权,非商业转载请注明出处。',
'作者:' + b,
'链接:' + a,
'来源:知乎',
'',
'']
}
function f(a, b, c) {
return '<div>' + d(b, c).join('<br />') + a + '</div>'
}
function g(a) {
var g = z.Xq(),
m = g && (0, z.ib) (g.Gd());
if (m && !(42 > m.length)) {
  if ('object' === typeof a.originalEvent.clipboardData && (a.originalEvent.clipboardData.setData('text/html', f(g.Of(), b, c)), a.originalEvent.clipboardData.setData('text/plain', d(b, c).join('\n') + m), 0 < a.originalEvent.clipboardData.getData('text/plain').length)) {
    a.preventDefault();
    return
  }
  if (window.getSelection) {
    a = g.Of();
    var n = (0, window.$) (f(a, b, c)).css({
      position: 'fixed',
      left: '-9999px'
    }).appendTo('body');
    window.getSelection().selectAllChildren(n.get(0));
    (0, window.setTimeout) (function () {
      g.select();
      n.remove()
    }, 200)
  }
}
}
a && b && c && (z.Fa(b, 'http') || (b = window.location.protocol + '//' + window.location.host + b), a.on('copy', g))
};

很简单,就是使用了clipboardData API(ClipboardEvent.clipboardData),通过监听元素的copy事件来实现对剪贴板的数据进行写入操作。
为什么?
二维码
下载知乎客户端
与世界分享知识、经验和见解
二维码
下载知乎客户端
与世界分享知识、经验和见解