BLOG ARTICLE javascript clipboard | 1 ARTICLE FOUND

  1. 2009.09.07 web에서의 clipboard 저장 4

web 에서 특정 글내용을 clipboard에 저장 해야하는 경우가 있습니다. ( 프로젝트를 하던.. 뭘 하던지 간에  )
IE는 아래와 같이하면 clipboard에 저장이 됩니다.

 var doc = document.all.field_id.createTextRange();
doc.execCommand('copy');

하지만 어디까지나 IE라는 것이죠.
파폭이나 크롬 등 IE 이외의 브라우저들은 지원을 하지 않습니다. 그럼 다른 사이트들은 어떻게 하는 것일까요?

해결책은 flash에 있습니다.
파일 업로드를 flash와 연동해서 하면 하면 여러파일을 한번에 올릴수 있죠!
마찮가지 입니다.
AcstionScript에 System.setClipboard(contents);
와 같은 내용이 있는데요 이것이 바로 clipboard에 내용을 저장하는것입니다.
이것을 javascript와 연동해서 사용하면 clipboard에 복사할수 있습니다.

이와 관련해서 clipboard에 저장을 쉽게 할수 있도록 라이브러리를 하나 만들어 봤습니다.
( 라이브러리라고 까지 할것 있는지 모르겠네요;; )

 사용법은 다음과 같습니다.

<script type="text/javascript" src="clipboard.js" charset="utf-8"></script>
<script>
 var jsonParameter = {};
 jsonParameter.clipboardCopy = "/js/clipboard/clipboard.swf"; //swf 경로
 jsonParameter.fieldName = "contents";   //복사할 내용의 field id
 jsonParameter.width = "70";      //버튼 너비
 jsonParameter.height = "30";     //버튼 높이
 jsonParameter.instanceName = "clipboard";  // var clipboard = new Clipboard(obejct); 할경우 변수명인 "clipboard"를 문자열로 지정
 jsonParameter.img = "ksj.jpg";     // 버튼 이미지 경로
 jsonParameter.callback = abcdef;    // callback 함수

 function abcdef(){
  alert("복사되었습니다.");
 }
 </script>
 <div>
 <script>var clipboard = new Clipboard( jsonParameter );</script>  //flash button 화면에 놓일 곳에 놓으면됨
                    //꼭 var clipboard처럼 변수명을 줘야함
 </div>

다음은 연동할 swf 와 js파일입니다.
테스트할때 주의점은 was에 올려놓고 해야한다는 것입니다.
그냥 압축만 풀고 html을 실행하면 작동하지 않습니다.

추후 내용을 점더 보안해서 버전업을 하도록 하겠습니다.

 tip) 파일 업로드도 와 clipboard 복사는  flash player 10 부터 보안사항때문에 javascript에 포함된 곳 부터의 액션(event 발생시점)은 제약 사항이 있어 실행 되지 않습니다.
무슨말 인가 하면.


파일 업로드 버튼이나. 클립보드 복사 버튼이 flash에 포함되지 않고 html의 javascript에서 flash를 호출하면 작동이 되지 않는다는 내용입니다.
flash와 연동할 일이 있으면 flash 쪽으로 이미지경로는 보내서 flash 쪽에서 노출되게 하고. 액션의 시작이 flash에서 시작해야합니다.!!

 

 

'jabsiri's Product' 카테고리의 다른 글

KPassword  (2) 2010.08.15
AND