如何向复制的Web文本添加额外信息

Question

一些网站现在使用来自Tynt的JavaScript服务,该文本将文本附加到复制的内容.

如果您使用此网站从网站复制文本然后粘贴,则会获得指向文本底部原始内容的链接.

Tynt也会跟踪它.这是一个很好的技巧.

他们这样做的脚本令人印象深刻 - 而不是试图操纵剪贴板(只有旧版本的IE允许他们默认执行,哪些应该总是关闭)他们操纵实际选择.

因此,当您选择一个文本块时,额外内容将作为隐藏<div>添加到您的选择中.粘贴时,将忽略额外的样式,并显示额外的链接.

这对于简单的文本块实际上相当容易,但是当您考虑在不同浏览器中复杂HTML中的所有选择时,这是一场噩梦.

我正在开发一个Web应用程序 - 我不希望任何人能够跟踪复制的内容,我希望额外的信息包含一些上下文,而不仅仅是一个链接.在这种情况下,Tynt的服务并不合适.

有没有人知道一个开源JavaScript库(可能是一个jQuery插件或类似的)提供类似的功能,但不暴露内部应用程序数据？

Answer 1

有两种主要方法可以为复制的Web文本添加额外信息.

1.操纵选择

我们的想法是观察copy event,然后将一个隐藏的容器附加到我们的额外信息dom,并将选择扩展到它.
这种方法适合从本文由c.bavota.查看jitbit的版本以了解更复杂的情况.

• 浏览器兼容性:所有主流浏览器,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酒店.请注意,此属性适用于所有主流浏览器read-only; 该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);

Answer 2

这是经过修改的解决方案的原始javascript解决方案，但支持更多浏览器（跨浏览器方法）

function addLink(e) {
    e.preventDefault();
    var pagelink = '\nRead more: ' + document.location.href,
    copytext =  window.getSelection() + pagelink;
    clipdata = e.clipboardData || window.clipboardData;
    if (clipdata) {
        clipdata.setData('Text', copytext);
    }
}
document.addEventListener('copy', addLink);