Вопрос по html5, clipboard, zeroclipboard – HTML5 альтернатива флеш-памяти ZeroClipboard для безопасного копирования данных в буфер обмена?

63

С выходом флэш-памяти во многих средах (iPhone, Android, IE10 и т. Д.), Есть ли какое-либо новое решение в любых браузерах, которое позволит безопасно копировать информацию в буфер обмена без установленной флэш-памяти?

Я используюZeroClipboard пока, но я беспокоюсь о большем количестве зрителей, у которых нет флэш-памяти, и эта функциональность будет нарушена, и я бы хотел, чтобы по возможности не зависеть от Flash.

@steveax - я видел это раньше. Это где-нибудь реализовано? Я также понимаю последствия для безопасности, но Flash удалось найти способ использовать некоторые функции, требуя действий пользователя. jfriend00
ЭтоClipboard API отW3C WebApps WG но я не верю, что все это было реализовано. Существует множество последствий для безопасности, связанных с предоставлением веб-приложению доступа к буферу обмена пользователя. steveax

Ваш Ответ

6   ответов
19

что этот ответ немного запаздывает, но теперь есть новая современная альтернатива ZeroClipboard (которая основана на Flash).Clipboard.js это2kB pure JavaScript альтернатива, которая имеетno dependencies.

Clipboard.js по существу использует функцию execCommand ...
По иронии судьбы этот плагин не поддерживает мобильный или настольный Safari, поэтому мы без поддержки iOS в любом случае.
6

Вот это. В основном то, что он делает, это использует в своих интересахdocument.execCommand('copy'); с помощью нескольких других команд, которые делают его таким, чтобы вы ничего не видели. Вот код:

function clip(text) {   
    var copyElement = document.createElement('input');      
    copyElement.setAttribute('type', 'text');   
    copyElement.setAttribute('value', text);    
    copyElement = document.body.appendChild(copyElement);   
    copyElement.select();   
    document.execCommand('copy');   
    copyElement.remove();
}
Почему это может быть правдой, скоро последние браузеры станут средними. Это простое решение, которое, как я признаю, опережает свое время, но со временем, когда все больше людей обновляются, это становится более полезным.
Хотя эта ссылка может ответить на вопрос, лучше включить сюда основные части ответа и предоставить ссылку для справки. Ответы, содержащие только ссылки, могут стать недействительными, если связанная страница изменится.
Спасибо за чаевые! Я исправлю это.
это поддерживается только в последних браузерах для получения дополнительной информации см.cbabhusal.wordpress.com/2015/11/15/…
3

этот блог для углубленного обсуждения того, как работать с буфером обмена в HTML5. К сожалению, вы все еще не можете копировать в буфер обмена по клику. Однако для chrome и firefox вы можете создать расширение для браузера, которое может дать вашему сайту разрешение на доступ к буферу обмена, и я полагаю, что IE позволит вам копировать в буфер обмена, но предложит пользователю предоставить разрешение.

Update:

Согласно этому:https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand Firefox 41+, Chrome 42+ и IE 9+ поддерживают команду копирования с помощью execCommand. Для Firefox и Chrome он будет работать только в том случае, если он вызван пользовательским действием, например щелчком, а для IE он выдаст пользователю диалоговое окно с предупреждением, запрашивающее разрешение на копирование в буфер обмена.

0

вы должны сначала выбрать () что-то на странице, чтобы вы не просто копировали то, что было в последний раз помещено в буфер обмена. С помощью этой функции я передаю идентификатор входного текстового поля в функцию и выбираю () ее, затем выполняю команду копирования. Не нужно добавлять слушателей или усложнять ваш код. Document.execCommand () возвращает false, если он не включен или не поддерживается, поэтому вы можете использовать window.prompt в качестве метода резервного копирования.

function copyToClipboard(id) {
    var blnCopied;
    document.getElementById(id).select();
    blnCopied = document.execCommand("copy", false, null);
    if (blnCopied)
        alert('Link copied to clipboard');
    else
        window.prompt ("Copy to clipboard: Ctrl+C, Enter", jQuery("#"+id).val());
}

Используйте стандартный & quot; a & quot; тег привязки с помощью onclick = "copyToClipboard (" some_id ")"

20

что автоматическое копирование в буфер обмена может быть очень опасным, поэтому большинство браузеров (кроме IE) * затрудняют это, если вы не используете flash.

Так же, как вашZeroClipboard, естьБуфер обмена LMCButton который также использует небольшой flash-скрипт, работающий в фоновом режиме.

Распространенным решением будет сделать это:

 function copyToClipboard (text) {
     window.prompt ("Copy to clipboard: Ctrl+C, Enter", text);
 }

Что я нашел у Ярека Милевского, когда кто-то ещезадал вопрос здесь

* Да, я нашел одно решение для IE, однако не работает в большинстве современных браузеров,проверьте здесь.

Если мы можем сделать это через Flash, то почему это будет дыра в безопасности, чтобы иметь возможность делать это через HTML5? Чтение из буфера обмена FROM определенно есть, но вызов записи в буфер обмена дырой в безопасности кажется немного надуманным, поскольку он требует от пользователя вставить его в нечто опасное.
Просто чтобы закончить, тогда ... :) Если мы, веб-разработчики, можем что-то делать во Flash, я не понимаю, почему мы не должны позволять себе делать это и в HTML (5). Если это дыра, то она уже есть, вероятно, в более чем 95% всех браузеров, поэтому мы не открываем новую дыру, и те, кто хочет ее использовать, все еще могут это сделать, только во Flash.
@freeall Многие пользователи просто не устанавливают flash во-первых и избегают этих дыр в безопасности. Делая его стандартным HTML5, это навязывает проблему всем, и производители браузеров на самом деле заботятся о том, чтобы НЕ добавлять дыр в безопасности.
Если бы я ранее вырезал важную информацию, и любой веб-сайт может перезаписать мой буфер обмена, это привело бы к моей потере информации. Это дыра в безопасности.
Я согласен с тем, что копирование из буфера обмена - это проблема безопасности, но я не вижу, чтобы на самом деле это было так. В конце концов, он требует, чтобы пользователь вставил его куда-нибудь, а затем, вероятно, выполнил другое действие, чтобы фактически отправить / выполнить его. Я не вижу гораздо большей угрозы, чем то, что я пишу на своем веб-сайте текст с надписью "Пожалуйста, скопируйте" / rm / * --recursive & apos; (вы знаете, что я имею в виду), и попросите пользователя выполнить его.
0

этот вопроси я решил использовать этот фрагмент:

function copyToClipboard(element) {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val($(element).text()).select();
    document.execCommand("copy");
    $temp.remove();
}

Однако, если на вашей странице есть выбор при загрузке,$temp.val($(element).text()).select() строка выдаст ошибку:

Widget can only work on select elements

Ты можешь использовать.trigger('select') вместо этого, как указано вДокументация jQuery для .select (), как это:

$temp.val($(element).val()).trigger('select');

Похожие вопросы