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

【问题标题】：Copy URL from browser using clipboard.js使用 clipboard.js 从浏览器复制 URL
【发布时间】：2016-05-25 16:18:11
【问题描述】：

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

【问题讨论】：

您是否尝试将变量的内容放入隐藏的 div 中，然后将此 div 用作 clipboard.js 目标？

标签： javascript clipboard.js

【解决方案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>

【讨论】：

芝诺，谢谢！这完美！另一个问题是如何使工具提示显示“已复制”，就像您的演示一样。这个没有示例代码。所以当复制完成时，我想将“已复制”显示为工具提示，然后当鼠标离开按钮时被默认工具提示替换。
真棒 ;D 有很多不同的方法可以做到这一点。例如，您可以使用 Bootstrap 的 Tooltip：stackoverflow.com/questions/37381640/… 或一些基于 CSS 的解决方案。您可以查看我们使用 PrimerCSS 的 clipboardjs.com 源代码：github.com/zenorocha/clipboard.js/tree/gh-pages
谢谢芝诺！我设法破解了一些对我有用的代码！很棒的工具，再次感谢您的意见！
Zeno，我已将我的代码转换为使用上面的变量方法，但这是我在使用 DOM 元素存储剪贴板数据时看到的 Chrome 和 IE 的问题......它出现了当你到达代码行时 var clipboard = New Clipboard(domElement);有时该代码不会执行，因为 DOM 元素还不存在。我知道 $(document).ready，但由于这是 angular 内部，我真的不想使用它。有任何想法吗？我需要快速修复当前版本。
document.addEventListener("DOMContentLoaded") 相当于 jQuery 的 $(document).ready

【解决方案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 Mahony他的反馈。
;)

【讨论】：

我必须添加两个 cmets。 (1) 无法从设置为 display:none 的字段中获取数据。它抛出一个错误； (2) 我最初通过使用文本框并将其设置为 position: absolute; 来解决这个问题。左：-999em 所以它在屏幕上不可见，但仍然可以通过代码访问。它有效，但在 Zeno 的建议下，我现在使用了一个变量。
@Michael Mahony：感谢您的反馈，非常感谢。你能告诉我它出现的错误是什么以及在哪个浏览器上（据我所知），因为我刚刚用 Chrome 进行了测试，它工作正常。没有错误，我在隐藏的 div 控制台中记录了 html。
@Michael Mahony：还是 Clipboard.js 的限制？
它说“无法读取隐藏字段的属性“文本””或类似的东西。也许隐藏的 div 与隐藏的表单元素不同？
我正在使用属性 html... 像这样： var hiddenDiv = $("#testID").html(); console.log(hiddenDiv);