cssing :: Архив :: Копировать в буфер

Копировать в буфер

Не самая критичная фича, но весьма специфическая в реализации.

Что это и зачем

Обычно эту кнопку помещают возле всяких «кодов для вставки» видео, или картинок. Чтобы людям было проще копировать. Как-то так:

Копирование ссылки на одном из укоротителей ссылок

Копирование кода на dni.ru

Как это делают

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

1. window.clipboardData.setData(’Text’,'Текст который будет в буфере’);

У всех остальных браузеров настройки безопасности по дефолту не позволят это сделать. Потому обычно этот вопрос решали с помощью Flash. Динамически создавался флэш ролик, и в его параметры добавляли текст, который нужно было поместить в буфер. А сам флэш уже имеет доступ к буферу в любой системе-браузере, примерно так:

1. flash = '<embed src="copy.swf" FlashVars="clipboard='+encodeURIComponent(t)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
2. element.innerHTML = flash;

Ролик запрограммирован так, что при создании сразу копирует свой параметр clipboard пользователю в буфер.
Так это всегда и работало. Но.

Проблема

Однако, осенью 2008 в флэше нашелся эксплойт, благодаря которому злоумышленники могли как угодно использовать буфер обмена пользователя без его ведома (собственно, метод описанный выше и был эксплойтом). Поэтому в Flash 10 было введено ограничение

With Flash Player 10, the System.setClipboard() method may be successfully called only through ActionScript that originates from user interaction.

Потому, на самом деле, вся та куча плагинов для jquery, например, которые вы нагуглите по запросу «jquery copy to clipboard» попросту не работает в 10м Flash плеере.
При этом, они отлично работают в 8 и 9 версиях (что внесло кучу путаницы в разбирательство с ситуацией). Но учитывая что 10й имеет долю больше 50% нет никакого смысла его игнорировать. Копирование в буфер старым способом больше нельзя считать надежным.

Решение

Так как мне в одном из проектов совершенно обязательно надо было реализовать эту фичу. Пришлось использовать единственный на данный момент вариант. Его я сделал реиспользуемым в своих же интересах.
Способ прост: если нельзя скопировать без клика на флэше, значит будем кликать на флэш.
Genn помог с самой простой и гибкой реализацией этой идеи.
Мы создали флэш-кнопку в качестве параметров которой передаются:

• clipboard — текст который нужно скопировать в буфер
• normal — картинка для для дефолтового состояния кнопки
• hover — картинка для mouseover состояния кнопки
• pressed — картинка для нажатого состояния кнопки

hover и pressed можно не задавать, тогда кнопка просто не будет изменяться при клике и наведении курсора. Текст из переменной clipboard копируется в буфер при клике на кнопку.
Для примера взял две такие картинки:

Зеленая дефолтовая, синяя для нажатого состояния. Потому что зеленый круче.

И самый простой пример иллюстрирующий применение, там же и другие примеры. Фактически с помощью одного этого ролика можно сделать почти любую нужную кнопку. Для чего я, собственно, это все и затеял =)

Ссылки

• Апдейт флэша в котором запретили копировать в буфер без действий пользователя
• Thanx for not killing the Flash clipboard
• Примеры кнопок (скачать файлы)
• Автоматизированный вариант с mootools
• Способ с джаваскриптом подставляющим поверх кнопок прозрачный флэш-ролик (Спасибо Иван!)
• Пост на mega.genn.org про эти кнопочки

Собственно пост я написал чтобы никто не пытался реализовать копирование в буфер с помощью старого джаваскрипта. И чтобы никогда больше не волноваться об этой проблеме самому. =)

Update: Как оказалось этот флэш-метод не работает на Ubuntu c Gnash/swfdec. Однако на этих эмуляторах не работают и никакие другие методы. Спасибо Владимиру за указание на проблему!

XHTML/CSS, Полезности