Copy Clipboard в Firefox методами JavaScript

Июнь 12th, 2010 по Perlover Оставить ответ »

Если вы программер под JavaScript, вы навярняка сталкивались с такой проблемой — как реализовать копирование в буфер обмена средствами JavaScript в Firefox. С Internet Explorer все понятно — Microsoft «постаралась», чтобы все, кому не лень, могли читать и писать в буфер обмена средствами JavaScript (по правильному, это конечно же, не должен делать любой сайт — мало ли что у вас в буфере обмена на тот момент, например пароль…). А вот Firefox с его сильной защитой JavaScript, не позволяет любому сайту это делать. Как быть?

Маленький экскурс — Firefox позволяет делать копирование в буфер, но разрешает это выполнять либо в chrome приложениях (то есть установленным расширениям, или Add-ons, другими словами), либо подписанным цифровой подписью приложениям в jar архивах — но при этом, у вас в броузере должен быть установлен корневой сертификат того разработчика, кому вы доверили это делать. Поэтому, обычному сайтовому программеру, как может показаться, ничего не остается, как сгенерировать свой сертификат, попросить посетителя его скачать, а свои JavaScript скрипты упаковать в Jar архив и его подписать. При этом, конечно, при любом изменении кода надо заново будет проделывать: упаковка в Jar, подпись Jar архива (ведь код изменился, а значит и подпись надо менять)… Именно, по началу, я так и думал, и даже делал (ох и муторно это!). Но есть способ попроще и лучше, но он не такой правильный с точки зрения безопасности. Но он также, как и в случае сертификата, требует определенных действий со стороны пользователя — также, однократных (сделал и забыл). То есть, как никрути, а просто сделать сайт, который бы читал/писал в буфер Clipboard своего посетителя, не получиться — все равно потребуется участие посетителя сайта (оно и правильно — нефиг делать без спросу опасные вещи!).

Итак, все что нужно сделать пользователю сайта — однократно, и не только для вашего сайта, а в общем для всех сайтов — это разрешить броузеру «спрашивать» посетителя о том, можно ли исполнять расширенные действия такому то сайту или нет (по умолчанию — ничего не спрашивается и не исполняется). Если посетитель отвечает, что можно — броузер запоминает домен, для которого это разрешили, и затем, действует в соответствии с этим разрешением всегда. Если другой сайт захочет, например, поработать с вашим буфером обмена — броузер снова спросит вас и предупредит, но однократно для этого домена и так далее.

Итак, делаем в броузере: about:config в адресной строке, соглашаемся с предупреждением, если таковое есть и там ищем параметр signed.applets.codebase_principal_support, ставим его в true. Все! Теперь осталось написать JavaScript код, например, копирование текстового значения title ссылки в буфера обмена, например:

// Общая функция копирования - копирует текст переменной maintext в clipboard, рабоает для IE и Firefox
function copy_clip(maintext)
{
 maintext = String(maintext)
 if (window.clipboardData)
   window.clipboardData.setData("Text", maintext);
 else if (window.netscape)
  {
   try
    {
     netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
     var gClipboardHelper = Components.classes["@mozilla.org/widget/clipboardhelper;1"].
     getService(Components.interfaces.nsIClipboardHelper);
     gClipboardHelper.copyString(maintext);
    }
   catch(err)
    {
     alert ("Clipboard copying error: " + err); return false
    }
  }
 return true;
}

Затем, уже используем дополнительные функции для конкретных типов структуры DOM документа HTML:

function copyObjText(obj)
{
 copy_clip(document.all ? obj.innerText : obj.textContent)
 return false
}

function copyTitleInLink(obj)
{
 copy_clip(obj.title)
 return false
}

А теперь, если нам надо скопировать в буфер значение поля title у ссылки типа <a title="что то" href="http://..."></a>, то делаем так:<a title="что то" onclick="return copyTitleInLink(this)" href="http://..."> Функция copyObjText может копировать текстовое поле тага textarea, например. Также, можно написать другой код для копирования любой информации из вашей страницы — очень удобно для автоматизации работы с ajax приложениями.

Вот, собственно и все! 🙂

QR-Code этой страницы:

2 комментария

  1. pauluss:

    Спасибо. А как прочитать буфер обмена в FF?

  2. Perlover:

    Ну, чтобы его прочитать, можно немного погуглить. Хотя бы из тех примеров, что я привел. Могли бы и сами попробовать 😉
    Вот что я нашел
    https://developer.mozilla.org/en/Using_the_Clipboard
    Там есть раздел «Pasting Clipboard Contents», а там уже метод getData. Как в точности это сделать — почитайте там. Мне самому это делать не было необходимости, поэтому готовых примеров привести не могу. Но думаю, если вы программист, но этой наводки вам уже будет достаточно. Как это делать в IE — я думаю, там это еще должно быть проще. Но опять же, для этого достаточно немного погуглить, и вы найдете то, что вам надо.