从网站复制/粘贴时编辑剪贴板数据

Question

我现在见过一些网站，如果您突出显示一篇文章的文本，复制它，然后粘贴，他们可以向其中添加更多文本。

尝试复制并粘贴 http://belfasttelegraph.co.uk/ 上的文章中的一段文本，您就会发现你会明白我的意思 - 他们在粘贴的文本中添加了指向原始文章的链接。

这是怎么做到的？我假设这里有一些 javascript 在工作

Answer 1

这是一个很好的效果，您可以看到使用 Firebug（在 Firefox 中）复制时触发的脚本。

启动Firebug并加载页面，选择clear（因为页面使用了大量ajax，很快就有100个请求）。然后选择“全部”选项卡并尝试复制。您将看到对 1x1 像素图像的请求，但如果按 + 按钮查看详细信息，您将在“params”选项卡中看到此 GET 请求将您请求的文本作为“content”参数传递，其中包含一些内容将用于操作剪贴板 DOM 的 xpath 信息：

start_node_xpath    /HTML/BODY[@id='belfast']/DIV[@id='root']/DIV[@id='content']/DIV[@id='mainColumn']/DIV[@id='article']/DIV[5]/P[39]/text()

end_node_xpath  /HTML/BODY[@id='belfast']/DIV[@id='root']/DIV[@id='content']/DIV[@id='mainColumn']/DIV[@id='article']/DIV[5]/P[41]/text()

正如 @Crimson 指出的，有一些方法可以操作剪贴板， 就像使用Flash和图像的zeroclipboard。

我认为这就是通过使用图像获取请求来更改剪贴板来完成该技术的方法。

Answer 2

您会注意到，只有当您使用组合键 [Ctrl+C] 时才会发生这种情况，而当您突出显示文本并从右键单击菜单中选择复制时则不会发生这种情况。

他们只是捕获 [Ctrl+C] 按键。

此外，要将数据添加到剪贴板，请查看这篇文章：
如何在 JavaScript 中复制到剪贴板？

Answer 3

我最近注意到网站上出现了这种“剪贴板劫持”的情况。 thefutoncritic.com、cracked.com...如果您使用 Adblock，只需进入“手动条目”列表并添加 *post-copypaste.js* 即可。这应该可以防止网站将其广告添加到您的剪贴板。

Answer 4

其他网站使用的另一种解决方案是使用 jQuery 和“复制”/“剪切”事件：

$('body').bind('copy cut',function(e){manipulate();});

这里有一些示例：
http://www.mkyong.com/jquery/how-to-detect-copy-paste-and-cut-behavior-with-jquery/" mkyong.com/jquery/how-to-detect-copy-paste-and-cut-behavior-with-jquery/

Answer 5

我访问的新闻网站使用此功能将“来源”附加到复制的选择中：

function addLink() {
    var body_element = document.getElementsByTagName('body')[0];
    var selection;
    selection = window.getSelection();
    // change this if you want
    var pagelink = "<br><br>Fuente: Emol.com - <a href='"+document.location.href+"'>"+document.location.href+"</a><br>";
    var copytext = selection + pagelink;
    var newdiv = document.createElement('div');
    newdiv.style.position='absolute';
    newdiv.style.left='-99999px';
    body_element.appendChild(newdiv);
    newdiv.innerHTML = copytext;
    selection.selectAllChildren(newdiv);
    window.setTimeout(function() {
        body_element.removeChild(newdiv);
    },0);
}
document.oncopy = addLink;