Javascript将文本复制到剪贴板，而不单击页面加载上的任何按钮

Question

我一直试图将我的P标记的内容复制到我的剪贴板上，而不需要点击任何按钮。

我试过在完美按钮上工作，click.Here是我为onClick编写的工作代码。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
 <p id="p1">Copied..</p>
 <button onclick="copyToClipboard('#p1')" id="ashvin">Copy</button>
</body>
</html>
<script>
 function copyToClipboard(element) {
  console.log('+++++++++++++++++++++++++++++++');
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  var status = document.execCommand("copy");
  if(status){
   console.log("=======done")
  }else{
   console.log("=======error")
  }
  $temp.remove();
 }
</script>

它的工作按钮点击罚款，但我想复制页面加载，而不是点击。

任何帮助都将不胜感激。谢谢!

Answer 1

许多document.execCommand方法(如复制)需要用户交互(比如单击)，因为使用诸如所要求的自动方法访问剪贴板(这是系统级，而不是浏览器级)被认为是一种安全风险。您可能需要重新考虑通过在页面加载上复制来实现什么。

上面的用例是什么，也许有人可以帮助您的场景？

编辑这里有一个链接，它在代码页上显示您的脚本。当您“运行”页面时，它应该给出“不工作”输出，当您单击该按钮时，它应该给出“已工作”输出

​

<!DOCTYPE html>
<html lang="en">
<head>
  <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
    
<script>
 function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  var status = document.execCommand("copy");
  if(status){
   $("#output").text("worked")
  }else{
   $("#output").text("didn't work")
  }
  $temp.remove();
 }
</script> 
    
  </head>
<body onload="copyToClipboard('#p1')">
 <p id="p1">Text to copy on page load, but won't work</p>
    <button onclick="copyToClipboard('#p1')">Copy the text</button>
 <p id="output"></p>
</body>
</html>

​

如果这是针对本地项目(即不会在公共域中)，也许可以在chrome中设置一些标志来覆盖安全风险，但我不知道它们是什么，或者它们是否存在，但可能值得一看。

更新了编辑，我被一些东西弄糊涂了。这感觉像一个完全的黑客，但它是对我(在glitch.com上)，所以我可能会纠正。我使用了本机navigator.clipboard.writeText方法，它也不起作用，但是当我同时尝试这两种方法(用铬)来测试这两种方法都不能工作时，它确实适用于“导航器”方法。结果，如果我在承诺执行之前将document.execCommand放在某个地方，那么它似乎是有效的。但是它不适用于codepen或内联脚本引擎(可能与iframes等有关)。谁能帮我检查一下我的健康状况吗？

• 在这篇文章中(对我)不起作用
• 在码页中(对我)不起作用
• (对我而言)在小故障上工作

​

<!DOCTYPE html>
<html lang="en">
<head>
    
<script>
    
function copyToClipboard(element) {
  document.execCommand("copy");  

  var text = document.querySelector(element).textContent;
  
  var output = document.getElementById("output");
  navigator.clipboard.writeText(text).then(function() {
    output.textContent = "worked";
  }, function() {
    output.textContent = "didn't work";
  });
}
</script> 
    
  </head>
<body onload="copyToClipboard('#p1')">
 <p id="p1">Text to copy on page load.</p>
  <button onclick="copyToClipboard('#p1')">
    Click to copy text
  </button>
 <p id="output"></p>
</body>
</html>

​

Answer 2

这将无法工作，因为复制命令必须由用户的操作触发。见本文：https://w3c.github.io/editing/execCommand.html#dfn-the-copy-command

我想这个问题是重复的：来自开发人员控制台

Answer 3

在document.body.onload()上编写函数或添加事件侦听器。document.body.addEventListener("load", copyToClipboard);或简单

    <body onload=copyToClipboard('#p1')>
     ..
    </body>