Скопировать текст в буфер обмена из букмарклета - PullRequest
Новая
       22

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

12 голосов
/ 19 февраля 2011

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

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

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

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

Любые указатели приветствуются.

Ответы [ 5 ]

8 голосов
/ 06 октября 2017

В 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 hasпредварительно минимизированный код.

6 голосов
/ 21 февраля 2011

Вот как я решил это, используя технику @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);
4 голосов
/ 23 июля 2014

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

<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 голосов
/ 19 февраля 2011

пара заявлений об отказе от ответственности:

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

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

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

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

В частности, строки, импортирующие 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);
  }

Надеюсь, это поможет.

3 голосов
/ 12 апреля 2018

В последних версиях Firefox взаимодействие с буфером обмена через букмарклет вообще не будет работать из-за отсутствия разрешений (см. эту информацию для получения более подробной информации).Однако может быть способ заставить букмарклет отображать кнопку и выполнять взаимодействие с буфером обмена в контексте обработчика события нажатия кнопки.

Возможно, более простым решением является использование пользовательского сценария.менеджер и определите свой букмарклет в виде пользовательского скрипта, который вы можете активировать с помощью комбинации клавиш.См., Например, этот пользовательский скрипт , воспроизведенный здесь для полноты: 

// Add the following as a user-script (via an extension like https://github.com/violentmonkey/violentmonkey) in order to copy the
// current webpage and selected text to the clipboard in a format suitable for pasting into an org-mode document.
// To execute the action, you need to press Alt-C on a webpage, though this can be modified by changing the keycode
// used in the onkeyup function.

// ==UserScript==
// @name Copy Org-mode Link
// @namespace Violentmonkey Scripts
// @match *://*/*
// @grant clipboardWrite
// ==/UserScript==

function main() {
    function copyTextToClipboard(text) { var textArea = document.createElement("textarea"); textArea.style.position = 'fixed'; textArea.style.top = 0; textArea.style.left = 0; textArea.style.width = '2em'; textArea.style.height = '2em'; textArea.style.padding = 0; textArea.style.border = 'none'; textArea.style.outline = 'none'; textArea.style.boxShadow = 'none'; textArea.style.background = 'transparent'; textArea.value = text; document.body.appendChild(textArea); textArea.select(); try { var successful = document.execCommand('copy'); var msg = successful ? 'successful' : 'unsuccessful'; console.log('Copying text command was ' + msg); } catch (err) { console.log('Oops, unable to copy'); } document.body.removeChild(textArea); }; var url = encodeURIComponent(location.href); url = url.replace(/%253A/g, ':').replace(/%252F/g, '/'); var title = document.title; title = title.replace(/\[/g, '{'); title = title.replace(/\]/g, '}'); var sel_text = window.getSelection(); copyTextToClipboard('[['+url+']['+title+']]'+'\n\n'+sel_text);
}

// listen for Alt-C key-combination, and then execute
document.onkeyup=function(e){
    var e = e || window.event; // for IE to cover IEs window object
    if(e.altKey && e.which == 67) {
         main();
         return false;
    }
}
...