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

Question

我正在使用 Accusoft 文档查看器。我需要一个按钮，单击该按钮会将当前 URL 加上页码查询字符串参数复制到剪贴板。我正在使用 clipboard.js。我确切地知道如何获取当前 URL 以及如何将页码参数添加到 URL。我不知道如何做的是让 clipboard.js 复制一个变量（例如生成的带有页码参数的 URL ）到剪贴板。有什么帮助吗？

Answer 1

通过将您的变量内容放入 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 可见时才有效。
可惜了。

所以我的解决方案是错误的。
无论如何我把它留在这里......作为"don't do it, it's a false-good idea".

感谢 Michael Mahony 的反馈。
;)

Answer 2

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>

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

Copy URL from browser using clipboard.js

javascript

clipboard.js