Скопировать текст в буфер обмена из букмарклета

Я пытаюсь написать небольшой букмарклет, который может извлечь какой-либо текст с активной страницы и загрузить его в буфер обмена.

Извлечение достаточно простое, но я действительно застрял, делая копию. В настоящее время я просто alert с текстом и нажатием Ctrl + C, чтобы скопировать текст из окна сообщения, что не идеально.

Я прочитал Как скопировать в буфер обмена в JavaScript и другие вопросы, которые предлагают использовать zeroclipboard, но я понятия не имею, как сделать эту работу из букмарклета, учитывая, что мне приходится загружать внешние ресурсы flash и javascript, чтобы иметь возможность использовать библиотеку.

У меня нет проблем с испорчением страницы DOM для этого или с необходимостью разрешать некоторые разрешения для моего браузера (Google Chrome), учитывая, что это просто закрытый букмарклет.

Любые указатели будут оценены.

Ответы

Ответ 1

Отказ от ответственности:

Я не пытаюсь спамить вас.
Я ничего не выиграю, если вы решите использовать этот

Я создал генератор буклетов , чтобы упростить создание букмарклетов.

Включен jQuery, но это не значит, что вам нужно использовать jQuery.

Вы можете проверить источник, чтобы узнать, как импортировать другую script/library в страницу через букмарклет.

В частности, строки, которые импортируют jQuery:

if (!window.zbooks)
  {
    //if zbooks hasn't been set, initialize it

    //s used for the Script element
    var s = document.createElement('script');
    //r used for the Ready state
    var r = false;
    //set the script to the latest version of jQuery
    s.setAttribute('src', 'http://code.jquery.com/jquery-latest.min.js');
    //set the load/readystate events
    s.onload = s.onreadystatechange = function()
    {
/**
 * LOAD/READYSTATE LOGIC
 * execute if the script hasn't been ready yet and:
 * - the ready state isn't set
 * - the ready state is complete
 *   - note: readyState == 'loaded' executes before the script gets called so
 *     we skip this event because it wouldn't have loaded the init event yet.
 */
      if ( !r && (!this.readyState || this.readyState == 'complete' ) )
      {
        //set the ready flag to true to keep the event from initializing again
        r = true;
        //prevent jQuery conflicts by placing jQuery in the zbooks object
        window.zbooks = {'jQuery':jQuery.noConflict()};
        //make a new zbook
        window.zbooks[n] = new zbooks(c);
      }
    };
    //append the jQuery script to the body
    b.appendChild(s);
  }

Я надеюсь, что это поможет.

Ответ 2

Вот как я решил это, используя технику @zzzzBov, упомянутую в его , чтобы импортировать zeroclipboard на странице через букмарклет.

Когда закладок запускается, курсор появляется при наведении курсора на любой объект тела. Щелчок будет скопировать (например) название документа в буфер обмена.

(Ссылки на ресурсы zeroclipboard были заменены заполнителями, и многострочные комментарии использовались, поскольку Chrome, похоже, удаляет все разрывы строк из букмарклетов (или что-то еще))

javascript:

var s = document.createElement('script');
s.setAttribute('src', 'http://example.com/ZeroClipboard.js');

s.onload = s.onreadystatechange = 
  function()
  { 
     ZeroClipboard.setMoviePath( 'http://example.com/ZeroClipboard.swf');
     var clip = new ZeroClipboard.Client();   

     /* glue to the body: sample only, in reality  we should
        probably create a new visible element and glue to that. */
     clip.glue(document.body);   

     clip.setHandCursor( true );

     /* copy to clipboard on mouse-up */
     clip.addEventListener('onMouseUp', 
      function (client) 
      {      
         /* example */
         var toCopy = document.title;        
         clip.setText(toCopy);    

         alert(toCopy + ' copied.');
         clip.hide();
      });  
   };

document.body.appendChild(s);

Ответ 3

Ответ, который немного необычен: откройте пустую страницу, с которой пользователь скопирует текст:

<a href="javascript:window.open('data:text/html, <html contenteditable>sup<script>document.execCommand(\'selectAll\')</script></html>')">
  Copy the text "sup"
</a>

Просто замените sup текстом, который вы хотите скопировать.

Пример JS Bin

Ответ 4

В Github Gist есть небольшая закладка, которая делает ядро того, что вы хотите - копирование в буфер обмена. Он не использует никаких внешних библиотек, которые, на мой взгляд, являются преимуществом.

Как написано, он копирует некоторый статический текст, но в нижней части он говорит об адаптации его к другим видам использования, таким как копирование названия страницы.

Поскольку вы заявили, что "извлечение достаточно просто...", вы должны легко адаптировать этот метод к тому, что хотите.

Я попробовал простую ванильную версию букмарклета, потому что у меня есть статический текст, который мне часто нужно перенести в буфер обмена. Он отлично работает в Chrome 61 без каких-либо изменений. Но обязательно прочитайте комментарии; у некоторых есть предложения по работе с ним в других браузерах и сценариях.

Вот код, который я тестировал, уже заминирован и готов превратиться в букмарклет:

javascript:!function(a){var b=document.createElement("textarea"),c=document.getSelection();b.textContent=a,document.body.appendChild(b),c.removeAllRanges(),b.select(),document.execCommand("copy"),c.removeAllRanges(),document.body.removeChild(b)}("Text To Copy");

У Gist также есть код с предварительной оценкой.