웹페이지에서 특정 소스를 클립보드에 복사를 해주는 경우가 있다.
해당 페이지를 사용하는 사용자 입장에서는 편리한 기능이지만, 이를 구현하는 방법은 쉽지가 않다. IE만 지원을 한다면 window.clipboardData Object를 이용해서 간단하게 구현이 가능하다. 대부분 국내 소스들도 해당 스크립트를 이용해서 처리를 하고 있지만, Internet Explorer에서만 제한적으로 사용이 가능하다.
다른 브라우저에서도 지원이 되고, 다른 운영체제(리눅스, OsX, …)에도 지원이 되는 클립보드를 구현하기 위해서 찾은 zeroclipboard 오픈소스를 소개합니다.
대부분 다른 클립보드 지원 소스가 비슷한 원리를 사용하고 있는데, 플래시(Adobe Flash)를 이용하여 클라이언트로 데이타를 전달하는 방식을 사용하고 있다. 여러 오픈 소스를 확인하다 보니, Flash Player 10에서는 지원이 되지 않는 것이 있어서 확인을 해봐야 한다.
아래는 ZeroClipboard 사용방법이다. JavaScript 파일을 추가한 다음에 복사할 문자열을 지정을 하고, 해당 동작을 원하는 HTML에 붙이기만 하면 된다. DOM의 id 값으로 지정을 하기만 하면 동작하게 된다.
<html> <body> <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> |
참고 URL : http://code.google.com/p/zeroclipboard/
테스트 페이지 : http://bowser.effectgames.com/~jhuckaby/zeroclipboard/
메뉴얼(WIKI) : http://code.google.com/p/zeroclipboard/wiki/Instructions
Warning: array_merge() [function.array-merge]: Argument #1 is not an array in /home/smlee/blog/wordpress/wp-content/plugins/seo-facebook-comments/seofacebook.php on line 488
Warning: Invalid argument supplied for foreach() in /home/smlee/blog/wordpress/wp-content/plugins/seo-facebook-comments/seofacebook.php on line 490