Пользователь
0,0
рейтинг
17 июля 2009 в 19:04

Разработка → Копируем в буфер обмена в 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

Набрано на лысой клавиатуре
Vitaliy Bogdanets @deerua
карма
82,2
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (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 все отлично работает

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