19 июля 2009, 16:06 более года назад
Копируем в буфер обмена в FireFox 3.5 и IE8
С приходом 10го флеша, ФФ3.5 и ИЕ8, на многих сайтах перестала работать волшебная кнопка «Скопировать в буфер». Перестала работать из соображений безопасности (что бы когда заходишь на какой либо сайт, у тебя в буфере не появилась левая ссылка, или рекламный текст, или злоумышленники не применили это фичу в других целях).
Сейчас ЕкшонСкрипт даёт скопировать в буфер обмена только при действии пользователя, то есть при клике по ролику (а ролик то можно сделать прозрачным ;). Этим и воспользовался jhuckaby при создании своего скрипта Zero Clipboard.
Скрипт работает во всех современных браузерах.
Проверено в ФФ3.5, ИЕ8, ИЕ8(мод7), Хром3, Опера10б2, Сафари4. Поддержка флеш 9 и 10.
Но скрипт этим не ограничен, у него есть чудесные свойства (методы):
О этом и многом другом, чудесно викирасписано
Сейчас ЕкшонСкрипт даёт скопировать в буфер обмена только при действии пользователя, то есть при клике по ролику (а ролик то можно сделать прозрачным ;). Этим и воспользовался 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>Полный пример
<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>