Как стать автором
Обновить

Перевод Вставка-копирование текста в буфер обмена на Javаscript — два способа с Flash 10

Чулан
В Flash 10, как оказалось, нельзя программно самому копировать текст в буфер обмена. До его выхода был очень удобный и элегантный способ, например, «Копировать код для вставки изображения в блог» / «Copy embed code» сразу в буфер пользователя. Я не говорю про IE, в котором это всегда раньше было реализуемо (не знаю как в ИЕ8) с помощью javascript-вызова window.clipboardData.setData('text',text);
Речь о том, как это сделать для пользователей альтернативных браузеров.

Итак, с выходом Flash 10, из соображений безопасности, была закрыта возможность программно заменять содержимое буфера обмена без участия пользователя. Подобная атака могла, например, непрерывно помещать в буфер обмена ссылку на сайт злоумышленника, из рассчета на то, что многие вставляют содержимое буфера в адресную строку браузера и жмут Enter, не обращая внимания на то, что именно вставилось.
В статье Adobe Developer Center говорится о том, что «старая» функция System.setClipboard(), и новый объект Clipboard.generalClipboard для работы с буфером обмена смогут работать, только если они были иницированы действиями пользователя, например, после нажатия на кнопку (to happen as the result of a user-initiated action). Еще много других правил безопасности было изменено с выходом 10 флэш-плеера, но нас интересует именно то, что теперь старый добрый Clipboard Copy от Jeffothy Keyings не работает.

На данный момент я нашел два выхода.

Один из способов предлагает создавать флэш-мувик с единственной кнопкой «Копировать», и в FlashVars передавать текст, который нужно поместить в буфер.

Actionscript 2.0
on (release) {
System.setClipboard(_level0.txtToCopy);
getURL('javascript:'+_level0.js+';');
}


HTML/JS
<script type="text/javascript">
function alertUser(){
alert('Текст скопирован в буфер обмена');
}
</script>
<div style="border:solid 1px black; width:60px; height:20px;">
<object width="60" height="20">
<PARAM NAME=FlashVars VALUE="txtToCopy=habrahabr&js=alertUser()">
<param name="movie" value="copyButton.swf">
<embed src="copyButton.swf" flashvars="txtToCopy=habrahabr&js=alertUser()" width="60" height="20">
</embed>
</object>
</div>


Скачать готовый флэш-файл можно здесь: copyButton.swf

FlashVars:
txtToCopy — строка, которую нужно скопировать в буфер
js — JS-функция, вызываемая после успешного копирования

(с) источник

По той же ссылке упоминается второй способ — ZeroClipboard, который многим может показаться более простым.

По словам разработчика, вам необходимо «прилепить» флэш-мувик к какому-нибудь конкретному элементу на странице, после чего пользователь может кликнуть по этому элементу, что будет перехвачено невидимым флэш-мувиком, находящимся над элементом. В таком и только таком случае Adobe Flash позволит работать с буфером обмена.

Тест1, тест2, тест3

Для начала подключаем скрипты
<script type="text/javascript" src="ZeroClipboard.js"></script>

Дальше необходимо указать где находится ZeroClipboard.swf (нужна абсолютная или относительная ссылка)
ZeroClipboard.setMoviePath( 'http://YOURSERVER/path/ZeroClipboard.swf' );

Теперь можно создавать клиентов.
Клиент в данном случае — это ZeroClipboard-объект, привязанный к определенной кнопке или какому-либо другому DOM-элементу. Скорее всего, вам понадобится только один клиент, но если у вас на странице несколько кнопок для копирования в буфер, создайте клиента для каждой из них.
var clip = new ZeroClipboard.Client();

Вы можете в любой момент указать текст, который нужно скопировать в буфер, — после загрузки страницы (onload), по клику, при onMouseOver или onMouseDown:
clip.setText( "Copy me!" );

Можно установить, какой курсор мыши будет при наведении на объект — рука (true, по умолчанию) или обычная стрелка (false)
clip.setHandCursor( true );

Самое интересное. Приклевание к элементу DOM.
clip.glue( 'd_clip_button' );

Да :) это и всё. Вы можете передать в эту функцию или HTML-ID элемента или сам объект (полученный например от document.getElementById()). Дальше все происходит автоматически — создается флэш-мувик, со всеми выставленными вами настройками, помещается над указанным DOM-элементом и ждет клика от пользователя.

Если ваш DOM-элемент перемещается (например, из-за того, что окно меняет размеры), используйте функцию clip.reposition(), обычно ее вешают на событие window.onresize

Более подробно о настройках и кучу примеров можно найти у автора — code.google.com/p/zeroclipboard
Там же описано как заставить флэш мувик реагировать не на клик, а на mouse over.

Zero Clipboard Library тестировалась на следующих платформах / браузерах:
Browser
Windows XP SP3
Windows Vista
Mac OS X Leopard
Internet Exploder 7.0 7.0
Firefox 3.0 3.0 3.0
Safari 3.0
Google Chrome 1.0 1.0

Adobe Flash Flash Player versions 9 and 10 are supported.

P.S. На самом деле, столкнулся с этой проблемой, нашел решение, и не смог не поделиться, — решился-таки на свой первый пост на хабре.
Теги:буфер обменаclipboardflash player 10actionscriptjavascript
Хабы: Чулан
Всего голосов 12: ↑11 и ↓1 +10
Просмотры1.5K

Похожие публикации

JavaScript Developer
от 2 700 €DiscoМожно удаленно
JavaScript-разработчик
до 180 000 ₽MobilityРязань
JavaScript разработчик
от 170 000 до 300 000 ₽WeMakeTeamМожно удаленно
Javascript разработчик
от 160 000 до 220 000 ₽ArtezioМосква
Senior JavaScript Developer
от 4 500 до 5 500 €Spotware SystemsМожно удаленно

Лучшие публикации за сутки