Javascript копировать текст в буфер обмена без нажатия любой кнопки при загрузке страницы - PullRequest
Новая
       24

Javascript копировать текст в буфер обмена без нажатия любой кнопки при загрузке страницы

0 голосов
/ 18 февраля 2019

Я пытался скопировать содержимое моего P тега в буфер обмена без какого-либо нажатия кнопки.

Я попытался, чтобы он работал на идеальном нажатии кнопки. Вот моя работакод для 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>

Хорошо работает при нажатии кнопки, но я хочу скопировать при загрузке страницы не клик.

Любая помощь будет принята с благодарностью.Спасибо!

Ответы [ 3 ]

0 голосов
/ 18 февраля 2019

напишите функцию на document.body.onload() или добавьте прослушиватель событий.document.body.addEventListener("load", copyToClipboard); или просто 

    <body onload=copyToClipboard('#p1')>
     ..
    </body>
0 голосов
/ 18 февраля 2019

Многие методы document.execCommand (например, копирование) требуют взаимодействия с пользователем (например, щелчка), поскольку считается, что получение доступа к буферу обмена (на уровне системы, а не на уровне браузера) с помощью автоматических методов, таких какпросят.Возможно, вам придется переосмыслить то, что вы пытаетесь достичь, копируя при загрузке страницы.

Каков вариант использования выше, и, возможно, кто-то может помочь с вашим сценарием?

[edit] Вот ссылка , которая показывает ваш скрипт на codepen.Когда вы «запускаете» страницу, она должна выдавать «не работает», когда вы нажимаете кнопку, она должна давать «обработанный» вывод 

<!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, и он не работал, НО, когда я пытался использовать оба метода бок о бок (в chrome), чтобы проверить, что оба не будут работать, он сделал работа для "навигатора".Оказывается, если я поместил document.execCommand где-нибудь до выполнения обещания, то, похоже, он работает.НО это не работает на codepen или здесь в механизме встроенных сценариев (может быть связано с iframes и т. Д.?).Может ли кто-нибудь проверить мое здравомыслие, пожалуйста?

  • Не работает (для меня) встроенный в этом посте
  • Не работает (для меня) в codepen
  • Работает (для меня) на глюк 

<!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>
0 голосов
/ 18 февраля 2019

Это не будет работать, потому что команда копирования должна запускаться действием пользователя.См. Этот пост: https://w3c.github.io/editing/execCommand.html#dfn-the-copy-command

Я думаю, этот вопрос является дубликатом: Невозможно использовать `document.execCommand ('copy');` из консоли разработчика

...