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

    С приходом 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>
     <!-- Инициализируем, с учётом что ZeroClipboard.swf радом с *.js -->
     <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>


    * This source code was highlighted with Source Code Highlighter.


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


    <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>


    * This source code was highlighted with Source Code Highlighter.


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



    Детально рассмотрено юзером dohtar

    Набрано на лысой клавиатуре
    Поделиться публикацией
    Похожие публикации
    Реклама помогает поддерживать и развивать наши сервисы

    Подробнее
    Реклама
    Комментарии 31
    • 0
      А как дела с обратным действием? т.е. программной вставкой из буфера.
      • +5
        Надеюсь, что никак.
        • 0
          В этом нету особой необходимости. Лень двигатель прогресса, но не до такой же степени)
          • +2
            флеш не умеет, в браузерах не предусмотренно, даже в старых ИЕ
            • 0
              JS умеет. Умел по крайней мере.
              Писал бэкенд на флексе в свое время — приходилось вставку из буфера реализовывать через JS. Flex вызывал js функцию, которая получала данные и возвращала назад во Flex.
              • +1
                В старых версиях IE есть события oncopy, onpaste и кажется oncut. А так же программный доступ к clipboard, правда, в основном, только к текстову представлению, и были какие то ограничения (давно было запамятовал).
                В IE7 спрашивается разрешение на доступ к clipboard, так как это значительная дыра в безопасности (полностью убрать не смогли, так как эту фичу используют корпоративные интранет ресурсы) — но в целом все так же, только работает не ахти (видимо новые ограничения или еще что-то).
                Как дела обстоят с IE8 сказать не могу, не ковырял.
                • 0
                  В IE можно вставить текст в буфер обмена. И в старых, и в новых. Только новые IE спросят у пользователя — действительно ли он разрешает это действие.
                  • 0
                    та вроде речь идет не о copy, а о paste ;)
                    • +1
                      Там в обе стороны можно.
                • 0
                  Если будет возможность программной вставки из буфера, то тогда появится куча «безобидных» сайтиков, которые втихушку следят за буфером в ожиданиях паролей и отсылают всё собранное нехорошим людям ;) И ни к чему хорошему это не приведёт.
                  • 0
                    Ну и кроме паролей ещё можно всякие личные данные, адреса кредиток и ещё много всего интересного понатырить…
                • 0
                  интересно
                  появляются тёмные мысли (в отношении буфера обмена)
                  • +2
                    Вставка из буфера пугает как-то больше чем вставка в буфер.
                    • +2
                      А вот меня наоборот. Представь, что скопировал №кошелька, что бы затем вставить в форму оплаты, а он у тебя подменился на №кошелька злоумышленника.
                      • 0
                        Теперь лучше не держать в клипборде номера кредиток и пассворыд перед заходом на неизвестный сайт…
                        • 0
                          но я думаю что adobe предусмотрели такую уязвимость
                      • +1
                        спасибо, дополнили тему raw-кодом и тестированием на современных браузерах
                        • –1
                          Что значит «Как же с этим бороться?». Бороться надо с теми, кто в этот буфер лезет! )
                          • 0
                            почему так категорично?
                            • +1
                              Вы же сами написали, что доступ к буферу отключили из соображений безопасности. Это, кстати, вполне логично, мне тоже (как пользователю) не нравится, что в буфер кто ни попадя может лезть ) Что вы там забыли? Для сайта на моём винте есть куки. А для пользователя, чтобы скопировать текст в буфер достаточно и встроенных средств, как то контекстное меню, кнопки на панели браузера и горячие клавиши.
                              • 0
                                Ну я предлагаю использовать данную «магию» только в полезных целях, таких как скопировать кусок кода, или цитату, текст, исходник HTML, когда его например просто неудобно выделить, а проще сделать какой-нибудь jQuery запрос, и модифицировать теги нужным функционалом.

                                зы: ну и как говорилось ниже, адблок палит ;)
                          • 0
                            почему так категорично?
                            • НЛО прилетело и опубликовало эту надпись здесь
                              • 0
                                Есть в фоксе, но для начала нужно выставить кучу разрешений через about:config, и этот метод кажись уже не актуален для 3.5. В вебките не нашёл ничего подобного.
                                • +1
                                  И правильно, а этот флэш — одна большая дыра. С html 5 можно будет наконец от него отказаться.
                                  • НЛО прилетело и опубликовало эту надпись здесь
                              • НЛО прилетело и опубликовало эту надпись здесь
                                • 0
                                  Плюс FlashBlock для полного комплекта :)
                                • +1
                                  как раз пару недель назад прикрутил эту штуку к сайту pip.ec, можно там глянуть в действии (наводите мышкой на «поделиться», жмете «скопировать в аську»)
                                  • 0
                                    в хроме 3.0.193.1 не работает.
                                    • 0
                                      у меня в хроме 3.0.193.1 все отлично работает

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