В 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
HTML/JS
Скачать готовый флэш-файл можно здесь: copyButton.swf
FlashVars:
txtToCopy — строка, которую нужно скопировать в буфер
js — JS-функция, вызываемая после успешного копирования
(с) источник
По той же ссылке упоминается второй способ — ZeroClipboard, который многим может показаться более простым.
По словам разработчика, вам необходимо «прилепить» флэш-мувик к какому-нибудь конкретному элементу на странице, после чего пользователь может кликнуть по этому элементу, что будет перехвачено невидимым флэш-мувиком, находящимся над элементом. В таком и только таком случае Adobe Flash позволит работать с буфером обмена.
Тест1, тест2, тест3
Для начала подключаем скрипты
Дальше необходимо указать где находится ZeroClipboard.swf (нужна абсолютная или относительная ссылка)
Теперь можно создавать клиентов.
Клиент в данном случае — это ZeroClipboard-объект, привязанный к определенной кнопке или какому-либо другому DOM-элементу. Скорее всего, вам понадобится только один клиент, но если у вас на странице несколько кнопок для копирования в буфер, создайте клиента для каждой из них.
Вы можете в любой момент указать текст, который нужно скопировать в буфер, — после загрузки страницы (onload), по клику, при onMouseOver или onMouseDown:
Можно установить, какой курсор мыши будет при наведении на объект — рука (true, по умолчанию) или обычная стрелка (false)
Самое интересное. Приклевание к элементу DOM.
Да :) это и всё. Вы можете передать в эту функцию или HTML-ID элемента или сам объект (полученный например от document.getElementById()). Дальше все происходит автоматически — создается флэш-мувик, со всеми выставленными вами настройками, помещается над указанным DOM-элементом и ждет клика от пользователя.
Если ваш DOM-элемент перемещается (например, из-за того, что окно меняет размеры), используйте функцию
Более подробно о настройках и кучу примеров можно найти у автора — code.google.com/p/zeroclipboard
Там же описано как заставить флэш мувик реагировать не на клик, а на mouse over.
Zero Clipboard Library тестировалась на следующих платформах / браузерах:
Adobe Flash Flash Player versions 9 and 10 are supported.
P.S. На самом деле, столкнулся с этой проблемой, нашел решение, и не смог не поделиться, — решился-таки на свой первый пост на хабре.
Речь о том, как это сделать для пользователей альтернативных браузеров.
Итак, с выходом 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. На самом деле, столкнулся с этой проблемой, нашел решение, и не смог не поделиться, — решился-таки на свой первый пост на хабре.
