如何添加额外的信息复制网页文字
有些网站现在使用Tynt的JavaScript服务，将文本附加到复制的内容上。
如果您使用此复制站点的文本，然后粘贴，您可以链接到文本底部的原始内容。
Tynt也会跟踪这件事。 这是一个很好的做法。
他们这样做的脚本是令人印象深刻的 – 而不是试图操纵剪贴板（只有IE的老版本让他们默认和哪些应该总是closures）他们操纵实际的select。
所以，当你select一个文本块时，额外的内容被添加为你的select中包含的一个隐藏的<div> 。 当你粘贴额外的风格被忽略，额外的链接出现。
对于简单的文本块来说，这实际上相当容易，但当您在不同的浏览器中考虑跨越复杂HTML的所有select时，这是一场噩梦。
我正在开发一个Web应用程序 – 我不希望任何人能够跟踪复制的内容，我希望额外的信息包含上下文的东西，而不仅仅是一个链接。 Tynt的服务在这种情况下并不合适。
有谁知道一个开源的JavaScript库（可能是一个jQuery插件或类似的），提供类似的function，但不公开内部应用程序数据？
有两种主要的方法来添加额外的信息复制网页文字。
1.操纵select
这个想法是观察copy event ，然后将一个隐藏的容器与我们的额外信息添加到dom ，并将select扩展到它。
这种方法是由c.bavota从这篇文章改编的。 也可以查看jitbit的更复杂的情况。
- 浏览器兼容性 ：所有主stream浏览器，IE> 8。
- 演示 ： jsFiddle演示 。
- Javascript代码 ：
function addLink() { //Get the selected text and append the extra info var selection = window.getSelection(), pagelink = '<br /><br /> 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);
2.操作剪贴板
这个想法是观察copy event并直接修改剪贴板数据。 这可以使用clipboardData属性。 请注意，此属性在所有主stream浏览器中都是可用的， setData方法仅在IE上可用。
- 浏览器兼容性 ：IE> 4。
- 演示 ： jsFiddle演示 。
- Javascript代码 ：
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);
我testing和工作的jQuery的最短版本是：
jQuery(document).on('copy', function(e) { var sel = window.getSelection(); var copyFooter = "<br /><br /> Source: <a href='" + document.location.href + "'>" + document.location.href + "</a><br />© YourSite"; var copyHolder = $('<div>', {html: sel+copyFooter, style: {position: 'absolute', left: '-99999px'}}); $('body').append(copyHolder); sel.selectAllChildren( copyHolder[0] ); window.setTimeout(function() { copyHolder.remove(); },0); });
这里是一个插件在jQuery中做到这一点https://github.com/niklasvh/jquery.plugin.clipboard从项目自述“这个脚本修改之前被调用的复制事件select的内容，导致复制的select与用户select的不同。;
这使您可以将内容附加到选定内容，例如版权信息或其他内容。
根据MIT许可证发布“
改进答案，改变后恢复select，以防止复制后的随机select。
function addLink() { //Get the selected text and append the extra info var selection = window.getSelection(), pagelink = '<br /><br /> Read more at: ' + document.location.href, copytext = selection + pagelink, newdiv = document.createElement('div'); var range = selection.getRange(0); //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); selection.removeAllRanges(); selection.addRange(range); }, 100); } document.addEventListener('copy', addLink);
还有一个更短的解决scheme：
jQuery( document ).ready( function( $ ) { function addLink() { var sel = window.getSelection(); var pagelink = "<br /><br /> Source: <a href='" + document.location.href + "'>" + document.location.href + "</a><br />© text is here"; var div = $( '<div>', {style: {position: 'absolute', left: '-99999px'}, html: sel + pagelink} ); $( 'body' ).append( div ); sel.selectAllChildren( div[0] ); div.remove(); } document.oncopy = addLink; } );
