2011/02/16 01:36
ZeroClipboard를 사용한 Cross-Browser 클립보드 기능 사용하기. DOM, Script2011/02/16 01:36
기존에 웹서비스에서 흔히 사용했던 퍼가기 기능을 구현가능하도록 해줬던 window.clipboardData.setData() 메소드는 알다시피 IE전용의 비표준함수이다.
이에 대한 대응으로 flash를 사용한 클립보드기능을 사용하였으나 이마저 flash10버젼이 나오면서 보안상의 이유로 막혀버렸다.;;
방법이 없을까 찾던중 "zeroclipboard" 라는 걸 발견. 바로 샘플확인후 적용해보았고 잘 돌아가는걸 확인했다.
zeroclipboard도 결국 JavaScript와 Flash의 연계를 통해 동작을 하는데 JavaScript-to-Flash interface인 ("ExternalInterface") 을 사용하는데 이는 오직 ONLINE상태에서만 가능하기에 로컬베이스로는 작동하지 않는다..;;
간략한 샘플 소스는 아래와 같다.
이에 대한 대응으로 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 (){
var clipBoard = new ZeroClipboard.Client();
//cursor hand type
clipBoard.setHandCursor( true );
//swf화일 경로 설정.
ZeroClipboard.setMoviePath("ZeroClipboard.swf");
//버튼 활성화
clipBoard.glue('copyContentBtn');
//마우스 클릭시에 이벤트 발생. - 저장한다.
clipBoard.addEventListener('mouseOver', function (client) {
<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) {
//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>
}
</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/
zeroclip.zip
'DOM, Script' 카테고리의 다른 글
| uploadify를 사용한 ajax 파일 업로드 처리 (0) | 2011/08/02 |
|---|---|
| ZeroClipboard를 사용한 Cross-Browser 클립보드 기능 사용하기. (1) | 2011/02/16 |
| Javascript 의 parseInt 함수 (0) | 2011/01/14 |
| 오랜 시간 동작되는 스크립트에 대한 브라우져별 대처와 원인?? (0) | 2010/12/08 |
| 웹브라우져별 전체 Height 값 구하기. (0) | 2009/08/13 |
| 자바스크립트 함수인자 call by value, call by reference (0) | 2008/12/11 |
댓글을 달아 주세요
좋은 정보 감사합니다 ^^