웹에서 플래시 없이 클립보드 사용하기

원문
Nika Layzell, https://hacks.mozilla.org/2015/09/flash-free-clipboard-for-the-web/

웹 플랫폼을 키우고 접근 가능한 새 도구로 만들기 위한 노력의 한 부분으로, 우리는 플래시(Flash)에 대한 웹의 의존성을 줄이는 노력을 하고 있다. 그 노력의 일환으로, 우리는 웹 플랫폼 전체를 위해 현재는 플래시로만 이용할 수 있는 유용한 기능들을 표준화하여 공개하고 있다.

많은 사이트들이 여전히 플래시를 사용하는 이유 중의 하나는 클립보드의 copy, cut API 때문이다. 플래시는 버튼을 누르는 경우에 사용자의 클립보드에 프로그램적으로 텍스트 복사를 위한 API를 노출한다. 이것들은 Github의 "clone URL" 버튼과 같은 편리한 기능 구현에 사용되어왔다. 그것은 또한 단축키나 컨텍스트메뉴 사용을 요구하는 것보다 클립보드에 복사하기 위한 버튼을 노출하기를 원하는 편집기 UI와 같은 것들에 유용하다.

불행하게도 웹 api들은 자바스크립트를 통해 클립보드에 텍스트 복사 기능을 제공해오지 않았다. 다행히 우린 해결책을 가지고 있다. 에디터 api들은 편집기 명령어 실행을 위한 진입점으로서 document.execCommand 를 제공한다. 카피와 컷 명령어는 웹페이지에서 이전부터 비활성화 되어왔다. 그러나 파이어폭스 41에서는 사용자 액션 초기화 콜백으로 자바스크립트에서 이용 가능하게 되었다.

execCommand("cut"/"copy") 사용하기

execCommand("cut"/"copy") API는 오직 클릭과 같은 사용자 트리거 콜백(callback)에서 사용 가능하다. 만일 당신이 다른 경우에 사용하려 한다면 execCommand는 false를 반환할 것이다. 그것은 명령어를 실행할 수 없음을 의미한다. execCommand("cut") 수행은 클립보드에서 현재의 셀렉션(selection)을 복사할 것이다. 이제 기본적인 클립보드 복사 버튼을 구현해보자.

// button which we are attaching the event to
var button = ...;
// input containing the text we want to copy 
var input = ...;

button.addEventListener("click", function(event) {
  event.preventDefault();
  // Select the input node's contents
  input.select();
  // Copy it to the clipboard
  document.execCommand("copy");
});

위의 코드는 firefox41 이후 버전에서 버튼 클릭 시 클립보드에 input에서의 텍스트 복사를 작동시킬 것이다. 하지만 당신은 아마도 실패 상황에서 잠재적으로 ZeroClipboard와 같은 또 다른 플래시 기반으로 접근하는 폴백(fallback)을 수행하거나 심지어는 사용자에게 기능을 지원하지 않는 브라우저라고 말해주는 것을 원할 것이다.

사용자 초기화 콜백이 밖으로 불리는 것 때문에 수행이 실패하게 된다면 execCommand는 false를 반환할 것이다. 하지만 구버전 파이어폭스에서는 "cut"이나 "copy" API들을 사용하는 시도를 하게 된다면, 보안 예외를 발생시킬 것이다. 따라서 만약 당신이 모든 실패에 대한 캡처를 원한다면 반드시 try-catch 블럭 안에서 호출해야 하고 또한 실패에 대한 예외도 해석해야 한다.

// button which we are attaching the event to
var button = ...;
// input containing the text we want to copy
var input = ...;

button.addEventListener("click", function(event) {
  event.preventDefault();
  input.select(); // Select the input node's contents
  var succeeded;
  try {
    // Copy it to the clipboard
    succeeded = document.execCommand("copy");
  } catch (e) {
    succeeded = false;
  }
  if (succeeded) {
    // The copy was successful!
  } else {
    // The copy failed :(
  }
});

"cut" API 또한 같은 메커니즘(mechanism)으로 웹 페이지에 공개되어 있다.

기능 테스트

편집기 API는 브라우저에서의 command 지원 여부를 확인하기 위한 document.queryCommandSupported("copy") 메소드를 제공한다. 불행히도 파이어폭스41 이전 버전에서는 웹페이지가 복사 기능을 정상 수행하지 않을 때에도 document.queryCommandSupported("copy")로부터 true 값을 얻게 된다. 하지만 document.execCommand("copy") 실행 시도는 SecurityException 발생시킬 것이다. 그에 따라 onload에서 복사를 시도하는 것 그리고 이 예외를 체킹 하는 것은 아마도 파이어폭스에서 document.execCommand("copy")를 위한 기능을 감지하는 가장 쉬운 방법일 것이다.

var supported = document.queryCommandSupported("copy");
if (supported) {
  // Check that the browser isn't Firefox pre-41
  try {
    document.execCommand("copy");
  } catch (e) {
    supported = false;
  }
}
if (!supported) {
  // Fall back to an alternate approach like ZeroClipboard
}

다른 브라우저에서의 지원

구글 크롬과 IE 또한 해당 API를 지원한다. 크롬은 파이어폭스와 같은 제약(사용자 초기화 콜백에서 실행되어야 하는)이 있다. IE는 먼저 클립보드에 액세스 할 수 있는 권한을 요청하는 대화 상자가 뜨는 경우를 제외하고는 언제든 호출되는 것을 허용한다.

API와 브라우저 지원에 대한 더 많은 정보는 MDN document.execCommand() 문서를 참고하길 바란다.