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

  • Z时代
  • 2024-01-10
  • 分类：问答

现在，某些网站使用Tynt的JavaScript服务，该服务将文本追加到复制的内容中。

如果使用此方法从站点复制文本然后粘贴，则在文本底部会获得指向原始内容的链接。

Tynt也会跟踪这种情况的发生。做得好，这是一个巧妙的技巧。

他们执行此操作的脚本令人印象深刻-而不是尝试操纵剪贴板（只有IE的较早版本才允许他们执行默认操作，并且应该始终将其关闭），而是操纵实际的选择。

因此，当您选择文本块时，多余的内容将作为隐藏内容添加<div>到您的选择中。粘贴时，多余的样式将被忽略，并显示多余的链接。

实际上，使用简单的文本块很容易做到这一点，但是当您考虑到在不同浏览器中跨复杂HTML进行所有选择时，这将是一场噩梦。

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

有谁知道开源的JavaScript库（可能是jQuery插件或类似的插件）提供相似的功能，但不公开内部应用程序数据？

回答：

2020更新

适用于所有 最新 浏览器的解决方案。

document.addEventListener('copy', (event) => {
  const pagelink = `\n\nRead more at: ${document.location.href}`;
  event.clipboardData.setData('text', document.getSelection() + pagelink);
  event.preventDefault();
});
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
<textarea name="textarea" rows="7" cols="50" placeholder="paste your copied text here"></textarea>

回答：

向复制的Web文本添加额外信息的主要方法有两种。

1.操纵选择

这个想法是要注意copy event，然后将带有额外信息的隐藏容器添加到，然后将dom选择范围扩展到该容器。

这种方法适合从c.bavota。还要检查jitbit_的版本以了解更复杂的情况。

  • ：所有主要浏览器，IE> 8。

  • ：
    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.操作剪贴板

这个想法是观看copyevent并直接修改剪贴板数据。使用该clipboardData属性是可能的。请注意，此属性可在中的所有主要浏览器中使用read-

only。该setData方法仅在IE上可用。

  • ：IE> 4。

  • ：
    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);

以上是 如何向复制的Web文本添加额外信息 的全部内容， 来源链接： utcz.com/qa/407807.html

回到顶部