기존에 웹서비스에서 흔히 사용했던 퍼가기 기능을 구현가능하도록 해줬던 window.clipboardData.setData() 메소드는 알다시피 IE전용의 비표준함수이다.
이에 대한 대응으로 flash를 사용한 클립보드기능을 사용하였으나 이마저 flash10버젼이 나오면서 보안상의 이유로 막혀버렸다.;;

방법이 없을까 찾던중 "zeroclipboard" 라는 걸 발견. 바로 샘플확인후 적용해보았고 잘 돌아가는걸 확인했다.
zeroclipboard도 결국 JavaScript와 Flash의 연계를 통해 동작을 하는데 JavaScript-to-Flash interface인 ("ExternalInterface") 을 사용하는데 이는 오직 ONLINE상태에서만 가능하기에 로컬베이스로는 작동하지 않는다..;;

간략한 샘플 소스는 아래와 같다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
 <TITLE> New Document </TITLE>
</HEAD>
<script type="text/javascript" src="ZeroClipboard.js"> </script>
<script type="text/javascript"> 

 window.onload = function (){
 initClipBoard();
 };

 function initClipBoard(){
  var clipBoard = new ZeroClipboard.Client();

  //cursor hand type
  clipBoard.setHandCursor( true );   
  //swf화일 경로 설정.
  ZeroClipboard.setMoviePath("ZeroClipboard.swf");
  //버튼 활성화
  clipBoard.glue('copyContentBtn');
  
  //마우스 클릭시에 이벤트 발생. - 저장한다.
  clipBoard.addEventListener('mouseOver', function (client) {
clipBoard.setText( document.getElementById("content").value );
  });
  //COPY완료시에 발생할 CALLBACK함수.
  clipBoard.addEventListener('complete', function (client) {
alert("클립보드에 복사되었습니다. \'Ctrl+V\'를 눌러 붙여넣기 해주세요.");
  });  
 }
</script>
<BODY>
 <IMG SRC="btn_scrap.gif" id="copyContentBtn">
 <textarea id="content">copy content!!! <p> tab copy!! </p></textarea>
</BODY>
</HTML>


- 티스토리 에디터에 붙여넣기하면 들여쓰기는 좀 맞춰줬으면.....안될려나..;;

img 태그에 이벤트를 걸어주면 해당 zeroclipboard가 투명한 "ZeroClipboard.swf"로 해당 영역을 덮어버리면서 사용자의 액션이벤트를 가로챈후 이를 플래쉬에서 저장한후 다시 "complete"를 통한 콜백함수를 호출하게 된다.

테스트는 IE8, 파이어폭스, 크롬, 사파리브라우져에서 테스트해보았다.

출처 : http://code.google.com/p/zeroclipboard/

  1. 지나가는이 2012.01.04 15:55

    좋은 정보 감사합니다 ^^

  2. 감사드립니다 2012.06.01 17:14

    정말 정말 좋은 정보 감사드립니다.ㅠ.ㅠ

+ Recent posts