Javascript: копируем данные в буфер обмена

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

Какие проблемы?! Сейчас сделаем кнопку, которая будет копировать необходимый текст в буфер обмена, и все, проблема решена!

Но оказалось все не так-то и просто...

Задача

Начнем по порядку. Что требуется от скрипта?

• Чтобы его было просто и удобно использовать.
• Чтобы он был кроссбраузерным.
• Чтобы у людей с отключенным яваскриптом не маячили кнопки "Скопировать в буфер обмена".

Для того, чтобы не перемешивать javascript-код с html-кодом, я обычно использую одну из двух техник:

• после загрузки страницы по событию "load" срабатывает функция, которая развешивает необходимые мне обработчики событий, расставляет кнопки и так далее;
• в некоторых местах html-кода или в его конце (по обстоятельствам) расставляются подобные инструкции: <ins><script type="text/javascript"> insertButton(); </script></ins>

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

Кнопку вставлять будем так: <div id="code" class="text-to-copy"> <a href="test">Код нашей воображаемой ссылки</a>. Этот код и текст должены оказаться в буфере! </div> <ins><script type="text/javascript"> insertCopyToClipboardButton("code"); </script></ins>

Таким образом, javascript-код должен будет создать после блока с id="code" кнопку, щелкнув по которой, мы отправим в буфер текст, содержащийся в этом блоке.

Структура скрипта

Скрипт будет содержать две основные функции:

• insertCopyToClipboardButton(wrapper_id) - вставляет кнопку и вешает на нее обработчик события click,
• copyToClipboard(text) - собственно, функция, которая и будет копировать текст в буфер.

Начнем с простого - со вставки кнопки. Вставлять новый элемент в html-документ будем через DOM, а значит, предварительно надо будет проверить, поддерживает ли браузер такую возможность. Подробно расписывать код этой функции не буду, остановлюсь только на некоторых особенностях. function insertCopyToClipboardButton(wrapper_id) { if (!document.getElementById || !document.getElementById(wrapper_id)) { // Браузер не поддерживает необходимые нам функции return false; } else { wrapper = document.getElementById(wrapper_id); } if (wrapper && wrapper.parentNode.insertBefore) { button = document.createElement("a"); button.setAttribute("href", "#"); button.innerHTML = "Скопировать в буфер"; button.onclick = function() { copyToClipboard(innerText(wrapper)); return false; } // emulate insertAfter: wrapper.parentNode.insertBefore(button, wrapper.nextSibling); } else { return false } }

Кнопка создается через DOM, а ее содержимое вставляется через innerHTML? Можно было и содержимое кнопки вставлять через DOM, но в данном случае удобнее innerHTML - это позволит при необходимости сделать графическую кнопку ( button.innerHTML = '<img src="clip.gif" alt="Скопировать в буфер" />'; ).

Еще одна особенность - для извлечения текста из элемента используется вспомогательная функция innerText(). Ей пришлось воспользоваться, т.к. непродолжительные пляски с бубном вокруг свойств innerHTML, innerText (IE) и textContent (FF/Mozilla) положительного результата не дали - вместо &quot; (кода) упорно копировался просто символ (").

Код функции: function innerText(node) { // @author Dethe Elza // @article "XML Matters: Beyond the DOM. Tips and tricks for a friendlier DOM" if (node.nodeType == 3 || node.nodeType == 4) { return node.data; } var i; var returnValue = []; for (i = 0; i < node.childNodes.length; i++) { returnValue.push(innerText(node.childNodes[i])); } return returnValue.join(''); }

Подробнее об этой и других полезных фишках можно почитать здесь: XML Matters: Beyond the DOM. Tips and tricks for a friendlier DOM

Копирование в буфер

Ну вот, приготовления закончились, наконец-то приступаем к основной части

Решение задачи, показавшейся мне сначала очень легкой, оказалось простым только для одного браузера - IE. В Internet Explorer'е копирование в буфер требует всего одной строчки кода: window.clipboardData.setData("Text", text);

Firefox и Opera не позволяют javascript-коду работать с буфером обмена по соображениям безопасности (ну-ка, кто хочет, чтобы любой сайт "читал", что у вас в буфере обмена или писал вам туда всякую фигню?) - Opera не позволяет вообще, а Firefox позволяет только, когда вы выставите в настройках (наберите about:config в строке адреса) значение true для свойства signed.applets.codebase_principal_support.

Ну что ж... попробуем озаботиться судьбой пользователей Firefox'а, которые зачем-то изменили эту настройку и позволили нашим скриптам чуть больше, чем им разрешено по умолчанию. Это уже так... не для практической пользы, а исключительно для развлечения.

Для начала нам придется спросить пользователя, даст ли он нам разрешение на доступ к API своего браузера: try { netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); } catch (e) { // do nothing }

После этого надо будет получить доступ к сервису Clipboard (буфер обмена) и создать контейнер для передачи данных между приложениями (объект Transferable): var clipboard = Components.classes["@mozilla.org/widget/clipboard;1"].getService(); if (clipboard) { clipboard = clipboard.QueryInterface(Components.interfaces.nsIClipboard); } var transferable = Components.classes["@mozilla.org/widget/transferable;1"].createInstance(); if (transferable) { transferable = transferable.QueryInterface(Components.interfaces.nsITransferable); }

Если все прошло нормально, т.е. пользователь нам разрешает пользоваться всем этим добром, то следующим нашим шагом будет создание объекта с данными (т.е. с текстом), который мы потом засунем в контейнер (transferable):

if (clipboard && transferable) { // тип передаваемых данных transferable.addDataFlavor("text/unicode"); var textObj = new Object(); var textObj = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString); if (textObj) { textObj.data = text; // Упаковываем данные в контейнер transferable.setTransferData("text/unicode", textObj, text.length*2); var clipid=Components.interfaces.nsIClipboard; clipboard.setData(transferable,null,clipid.kGlobalClipboard); } }

Обратите внимание на строку transferable.setTransferData("text/unicode", textObj, text.length*2);

Последний аргумент функции - размер передаваемых данных в байтах. Т.к. мы при передаче указываем тип данных "text/unicode" (это настоятельно рекомендуют разработчики Мозиллы), то надо указывать длину нашей реальной строки, умножененную на 2 - так мы получим соответствие размеру строки в двухбайтовой кодировке.

Все, теперь наш текст находится в буфере, все танцуют. Все кроме тех, у кого нормально настроен Firefox, или тех, кто пользуется Оперой

Им мы, пожалуй, скажем, что они о своем браузере знают далеко не все

Результат

Ну, посмотрим, что получится, если склеить все эти куски кода вместе.

• JS-код
• Страница с кнопкой

Небольшой апдейт

Эта заметка была написана довольно давно, сейчас я только случайно нашел ее текст. Исходные коды, к сожалению, не сохранились, т.к. во всех реальных проектах я пользовался более простым вариантом скрипта, который даже не пытается создать кнопку и залезть в буфер, если браузер не поддерживает метод setData у объекта window.clipboardData.

Примеры я воссоздал, но для использования на рабочих сайтах рекомендую пользоваться вариантом, о котором написано абзацем выше: JS-код, Страница с кнопкой

Запись опубликована 04.08.2007 в 22:30.
Вы можете отслеживать обсуждение записи, используя ленту RSS 2.0.
Вы можете оставить комментарий, или трекбек с Вашего сайта.