클립보드 복사 기능 구현을 위한 소스 코드

텍스트큐브에서 트랙백 주소 복사 기능에 사용하고 있는 클립보드 복사 기능 구현을 위한 소스 코드입니다. 관련된 소스 코드만 추려낸 것으로 플래시 액션 스크립트 clipboardPoter.as 와 자바스크립트 copy2clipboard.js 그리고 실제 홈페이지에 적용가능한 예제 웹문서 copy2clipboard.html 으로 구성하였습니다.
웹문서에서 자바스크립트 메소드를 이용해서 클립보드 복사가 가능하지만 보안창이 뜨기 때문에 사용자 입장에서 불편함이 있으므로 이를 우회하기 위해 요즘 보편적으로 깔려있는 플래시 환경을 이용하고 있습니다. 플래시 액션스크립트에서 System.setClipboard 메소드를 이용해서 클립보드 복사 기능을 구현하고 있고 플래시 환경이 아닐경우 기존 자바스크립트 복사 메소드 window.clipboardData.setData 를 이용하고 있습니다. 그리고 플래시와 자바스크립트 사이의 통신을 위해 addCallback 메소드를 사용하고 있습니다.
구현 원리에 대해 이해가 되셨으면 아래 소스 코드를 찬찬히 살펴보시고 실무에 적용해보실 수 있습니다.

웹프로그래머의 홈페이지 정보 블로그 http://hompy.info

[clipboardPoter.as]

---

function setClipBoard(str) {
System.setClipboard(str);
flash.external.ExternalInterface.call(callback, true);
}
System.security.allowDomain("*");
var methodName = "setClipBoard";
var instance = null;
var method = setClipBoard;
var wasSuccessful = flash.external.ExternalInterface.addCallback(methodName, instance, method);


[copy2clipboard.js]

---

function d0cument_write(s){
d0cument.write(d0cument.getElementById(s).value);
}
var sUserAgent = navigator.userAgent;
var isOpera = sUserAgent.indexOf("Opera") > -1;
var isIE = sUserAgent.indexOf("compatible") > -1
&& sUserAgent.indexOf("MSIE") > -1
&& !isOpera;
function thisMovie(movieName) {
if (navigator.appName.indexOf("Microsoft") != -1) {
return d0cument.getElementById(movieName);
}
else {
return d0cument[movieName];
}
}
function copyUrl(url) {
try {
thisMovie('clipboardPoter').setClipBoard(url);
} catch(e) {
if(isIE) {
window.clipboardData.setData('Text',url);
window.alert("주소가 복사되었습니다.");
}
}
}
function onClipBorad(result) {
alert(result ? "주소가 복사되었습니다." : "주소 복사를 실패했습니다.");
}


[copy2clipboard.html]

---

<script type='text/javascript'>
window.clipboardPoter = d0cument.getElementById("clipboardPoter");
</script>

<span onclick="copyUrl('http://hompy.info/504')" style="cursor:pointer">http://hompy.info/504</span>

<div style="position:absolute;top:0;left:0; background-color:transparent;background-image:none">
<textarea id="flash_copy_to_clipboard" style="display:none;" rows="0" cols="0">
<OBJECT id="clipboardPoter" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="1" height="1"><param name="src" value="/swf/clipboardPoter.swf"/><param name="movie" value="/swf/clipboardPoter.swf"/><param name="wmode" value="transparent"><param name="allowscriptaccess" value="always"><param name="flashvars" value="callback=onClipBorad"><EMBED name="clipboardPoter" pluginspage="http://www.macromedia.com/go/getflashplayer" src="/swf/clipboardPoter.swf" width="1" height="1" type="application/x-shockwave-flash" quality="high" wmode="transparent" FlashVars="callback=onClipBorad" allowscriptaccess="always"></EMBED></OBJECT></textarea><script type='text/javascript'>d0cument_write('flash_copy_to_clipboard');</script>
</div>