使用clipboard.js从浏览器复制URL

Question

我正在使用Accusoft文档查看器。我需要一个按钮，当单击该按钮时，该按钮将复制当前URL和一个页码querystring参数到剪贴板。我正在使用clipboard.js。我很清楚如何获得当前的URL，以及如何向URL中添加一个页码参数。我不知道如何将clipboard.js复制一个变量(例如生成的带有页码参数的URL )到剪贴板。在这方面有什么帮助吗？

Answer 1

) Clipboard.js创建者;)

您可以使用命令式API来实现这一点：

​

var url = document.location.href;

new Clipboard('.btn', {
  text: function() {
    return url;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>


<button class="btn">Copy</button>

​

Answer 2

通过将变量的内容放置到div中，然后将其用作clipboard.js的目标。

我不得不承认我没有试过，但应该会成功的。

您的按钮( clipboard.js站点的示例)：

<button class="btn" data-clipboard-target="#clipboardTarget">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>
<div id="clipboardTarget" style="display:none;"></div>

将变量的内容放入目标div中：

var myData = "http://example.com?data=something";
$("#clipboardTarget").html(myData);

它现在可以复制了。

-

编辑

好的，在下面的讨论之后，我通过下载Clipboard.js来尝试我的解决方案，并对其进行了测试。

(总有一天，我会在发帖前学会测试我的解决方案！)

结果表明，只有在可见的情况下，它才能在div上工作。

可悲的是。

，所以我的解决方案是错的。

反正我把它留在这里了..。作为一个“不要这样做，这是一个错误的-好主意”。

感谢Michael 的反馈。

;)