Копируем в буфер обмена в FireFox 3.5 и IE8

Sun, 19 Jul 2009 16:06:04 +0200

С приходом 10го флеша, ФФ3.5 и ИЕ8, на многих сайтах перестала работать волшебная кнопка «Скопировать в буфер». Перестала работать из соображений безопасности (что бы когда заходишь на какой либо сайт, у тебя в буфере не появилась левая ссылка, или рекламный текст, или злоумышленники не применили это фичу в других целях).

Сейчас ЕкшонСкрипт даёт скопировать в буфер обмена только при действии пользователя, то есть при клике по ролику (а ролик то можно сделать прозрачным ;). Этим и воспользовался jhuckaby при создании своего скрипта Zero Clipboard.

Посмотреть демо:

Скрипт работает во всех современных браузерах.
Проверено в ФФ3.5, ИЕ8, ИЕ8(мод7), Хром3, Опера10б2, Сафари4. Поддержка флеш 9 и 10.

Суть:

После того, как мы с помощью JS, инициализируем скрипт, укажем путь к ZeroClipboard.swf и создадим клиент для копирования, мы можем смело заносить в буфер по клику, любую информацию.

Но скрипт этим не ограничен, у него есть чудесные свойства (методы):

приклеивание к DOM элементу (Gluing) — то бишь, мы указав айди элемента, приклеиваем поверх него флешку (она копирует в буфер), которая автоматически подстроится под размер элемента;
ксс эффекты — скрипт подсвечивает элемент, на который подвешена кнопка, создавая сабклассы «hover», «active» (аля псевдо). Их можно изменить на своё усмотрение в CSS;
возможность задать собственное представление — это на случай, если нужно создать кастомный прямоугольник, и не нужно никуда клеить флешку;
и ещё он может рулить стандартными событиями (onLoad, onMouseOver, onMouseOut, onMouseDown, onMouseUp, onComplete).

О этом и многом другом, чудесно викирасписано

Пример

<html> <body>  <script type="text/javascript" src="ZeroClipboard.js"></script>  <div id="d_clip_button" style="border:1px solid black; padding:20px;">Copy To Clipboard</div> <script language="Javascript"> // Создаём клиент var clip = new ZeroClipboard.Client(); // Указываем что копируем clip.setText( 'Copy me!' ); // Клеим к кнопке clip.glue( 'd_clip_button' ); </script> </body> </html>

Полный пример

<html> <head> <style type="text/css"> #d_clip_button { text-align:center; border:1px solid black; background-color:#ccc; margin:10px; padding:10px; } /* Указываем свои стили для пседо-саб-классов */ #d_clip_button.hover { background-color:#eee; } #d_clip_button.active { background-color:#aaa; } </style> </head> <body> <script type="text/javascript" src="ZeroClipboard.js"></script> Copy to Clipboard: <input type="text" id="clip_text" size="40" value="Copy me!"/><br/><br/> <div id="d_clip_button">Copy To Clipboard</div> <script language="Javascript"> var clip = new ZeroClipboard.Client(); clip.setMoviePath( 'ZeroClipboard.swf' ); // укажем путь к флешке clip.setText( '' ); // onМouseDown будет копировать нужный текст clip.setHandCursor( true ); // делаем курсор в виде руки clip.setCSSEffects( true ); // разрешаем CSS эффекты clip.addEventListener( 'load', function(client) { // alert( "Загрузилась флешка " ); }); clip.addEventListener( 'complete', function(client, text) { alert("Скопирован текст: " + text ); }); clip.addEventListener( 'mouseOver', function(client) { // alert("Навели мышку на флешку"); }); clip.addEventListener( 'mouseOut', function(client) { // alert("Убрали мышку с флешки"); }); clip.addEventListener( 'mouseDown', function(client) { // alert("Нажали мышкой по флешке"); // Копируем нужный текст, в данном случае значение инпута 'clip_text' clip.setText( document.getElementById('clip_text').value ); }); clip.addEventListener( 'mouseUp', function(client) { // alert("Отжали мышку"); }); // Приклеили к кнопке с айди 'd_clip_button' clip.glue( 'd_clip_button' ); </script> </body> </html>

Ещё раз ссылки:

Комментарии к заметке

Теги:
flash
javascript

Валидная страница с флешем

Mon, 26 May 2008 15:19:19 +0200

<object width="ДЛИНА" height="ШИРИНА" 
vspace="0" hspace="0"  type="application/x-shockwave-flash" 
data="ПУТЬ_К_ФЛЕШКЕ">
    <param name="allowScriptAccess" value="sameDomain"/>
    <param name="movie" value="ПУТЬ_К_ФЛЕШКЕ"/>
    <param name="bgcolor" value="#FFFFFF"/>
    <param name="quality" value="high"/>
    <param name="wmode" value="transparent"/>
    <param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer"/>
</object>

Комментарии к заметке

Теги:
html > tags > embedet
flash
html
html > w3c > validate
html > w3c