웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
인터넷 익스플로러에서의 텍스트 복사 함수는 아주 단순하다.
문 제는 window.clipboardData라는 객체가 인터넷 익스플로러 이외에는 사용이 불가능한 관계로 Cross-Browsing을 위해 위의 함수를 쓰기엔 아쉬움이 많다. 아울러 한가지 추가적인 문제가 있는데, 보안 문제 때문에 '억세스 확인'창이 뜬다는 것이다.
파이어폭스에도 꼼수를 사용하면 위와 같이 클립보드로 억세스가 가능하지만 이것 역시 "보안 확인"이 필요로 하기 때문에 사이트를 이용하는 유저 입장에서는 '그냥 텍스트 복사를 하는데 뭐 이렇게 복잡한가'라고 생각할 수 있겠다. 그래서 이 문제를 해결하기 위해 사이트를 뒤져보니 역시나 방법이 존재했다.
나는 이 방법으로 그냥 스킨에 '주소복사'기능을 만들고 싶었을 뿐이었기 때문에 보다 폭넓은 활용을 위해서는 원문을 참조하기 바란다.(아쉽지만 원문 역시 원리를 설명한다거나 하진 않는다.)
Jeffothy's Keyrings - Clipboard Copy
잘 모르는 분들을 위해 제로보드 XE 스킨에 위의 방법을 어떻게 적용하는가 설명한다.
1. copy.js를 작성한다.
여기에서 request_uri 뒤의 하일라이트된 swf 경로를 자신에 맞게 변경해야 한다. 내 경우에는 digist_simple이라는 스킨 디렉토리아래 js라는 폴더를 만들고 그 안에 copy.js를 위치시키고, swf파일은 digist_simple이라는 스킨 디렉토리에 넣었다.
예를 들어 xe_board를 이 팁으로 개조하고 싶다면 18번째 라인을 다음의 코드로 대체하면 된다. 블로그 스킨도 동일한 요령이므로 차근차근 따라하면 큰 무리가 없을 것이다.
2. 첨부된 파일을 다운받는다. 이 파일의 압축을 풀어 스킨 디렉토리에 넣는다.
_clipboard.zip
3. 이제 스킨을 고친다. 트랙백 주소를 클릭하면 복사하도록 만들고 싶다면,
라고 쓰여져 있는 부분을 찾아서,
위와 같이 앞뒤에 <a>태그를 넣어준다. 그 다음 윗 줄에 간단하게 한줄을 더 써주면 되겠다.
예로 공식배포본에 포함되어 있는 xe_board 스킨의 수정파일을 함께 첨부한다.
xe_board.zip
클립보드로 텍스트 복사하기
2007.11.24 22:07
블로그에 올린 글을 옮깁니다. 그런 관계로 경어체로 작성되었음을 양해해주시기 바랍니다.
아래의 글은 Cross-Browsing을 위한 Clipboard 지원에 대한 내용입니다.
원본보기
아래의 글은 Cross-Browsing을 위한 Clipboard 지원에 대한 내용입니다.
원본보기
인터넷 익스플로러에서의 텍스트 복사 함수는 아주 단순하다.
window.clipboardData.setData("Text", text);
문 제는 window.clipboardData라는 객체가 인터넷 익스플로러 이외에는 사용이 불가능한 관계로 Cross-Browsing을 위해 위의 함수를 쓰기엔 아쉬움이 많다. 아울러 한가지 추가적인 문제가 있는데, 보안 문제 때문에 '억세스 확인'창이 뜬다는 것이다.
파이어폭스에도 꼼수를 사용하면 위와 같이 클립보드로 억세스가 가능하지만 이것 역시 "보안 확인"이 필요로 하기 때문에 사이트를 이용하는 유저 입장에서는 '그냥 텍스트 복사를 하는데 뭐 이렇게 복잡한가'라고 생각할 수 있겠다. 그래서 이 문제를 해결하기 위해 사이트를 뒤져보니 역시나 방법이 존재했다.
나는 이 방법으로 그냥 스킨에 '주소복사'기능을 만들고 싶었을 뿐이었기 때문에 보다 폭넓은 활용을 위해서는 원문을 참조하기 바란다.(아쉽지만 원문 역시 원리를 설명한다거나 하진 않는다.)
Jeffothy's Keyrings - Clipboard Copy
잘 모르는 분들을 위해 제로보드 XE 스킨에 위의 방법을 어떻게 적용하는가 설명한다.
1. copy.js를 작성한다.
/**
* @file copy.js
* @author Venister (venister@empal.com)
* @brief General Text Copy Function For ZBXE. It's based on Jeffothy's implementation. (http://www.jeffothy.com/weblog/clipboard-copy/, License Condition: GPL)
**/
function copyText( text ) {
var strCopied = "복사되었습니다. 붙여넣기(Ctrl + V)를 해서 사용하십시오.";
try {
var objCopy = null;
if(!(objCopy = xGetElementById("flashcopier"))){
objCopy = xCreateElement('div');
objCopy.id = "flashcopier";
xAppendChild(document.body, objCopy);
}
xInnerHtml(objCopy, "");
xInnerHtml(objCopy, '<embed src="'+request_uri+'modules/board/skins/digist_simple/_clipboard.swf" FlashVars="clipboard='+encodeURIComponent(text)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>');
window.alert(strCopied);
} catch (e) {
if (window.clipboardData) {
window.clipboardData.setData("Text", text);
window.alert(strCopied);
}
}
}
* @file copy.js
* @author Venister (venister@empal.com)
* @brief General Text Copy Function For ZBXE. It's based on Jeffothy's implementation. (http://www.jeffothy.com/weblog/clipboard-copy/, License Condition: GPL)
**/
function copyText( text ) {
var strCopied = "복사되었습니다. 붙여넣기(Ctrl + V)를 해서 사용하십시오.";
try {
var objCopy = null;
if(!(objCopy = xGetElementById("flashcopier"))){
objCopy = xCreateElement('div');
objCopy.id = "flashcopier";
xAppendChild(document.body, objCopy);
}
xInnerHtml(objCopy, "");
xInnerHtml(objCopy, '<embed src="'+request_uri+'modules/board/skins/digist_simple/_clipboard.swf" FlashVars="clipboard='+encodeURIComponent(text)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>');
window.alert(strCopied);
} catch (e) {
if (window.clipboardData) {
window.clipboardData.setData("Text", text);
window.alert(strCopied);
}
}
}
여기에서 request_uri 뒤의 하일라이트된 swf 경로를 자신에 맞게 변경해야 한다. 내 경우에는 digist_simple이라는 스킨 디렉토리아래 js라는 폴더를 만들고 그 안에 copy.js를 위치시키고, swf파일은 digist_simple이라는 스킨 디렉토리에 넣었다.
예를 들어 xe_board를 이 팁으로 개조하고 싶다면 18번째 라인을 다음의 코드로 대체하면 된다. 블로그 스킨도 동일한 요령이므로 차근차근 따라하면 큰 무리가 없을 것이다.
xInnerHtml(objCopy, '<embed src="'+request_uri+'modules/board/skins/xe_board/_clipboard.swf" FlashVars="clipboard='+encodeURIComponent(text)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>');
2. 첨부된 파일을 다운받는다. 이 파일의 압축을 풀어 스킨 디렉토리에 넣는다.
_clipboard.zip
3. 이제 스킨을 고친다. 트랙백 주소를 클릭하면 복사하도록 만들고 싶다면,
{$oDocument->getTrackbackUrl()}
라고 쓰여져 있는 부분을 찾아서,
<a href="javascript:copyText('{$oDocument->getTrackbackUrl()}')">...</a>
위와 같이 앞뒤에 <a>태그를 넣어준다. 그 다음 윗 줄에 간단하게 한줄을 더 써주면 되겠다.
<!--%import("js/copy.js")-->
예로 공식배포본에 포함되어 있는 xe_board 스킨의 수정파일을 함께 첨부한다.
xe_board.zip
댓글 5
-
주하니
2007.11.25 12:25
-
세바스찬
2007.11.30 09:44
클립보드 복사는 사실상 크로스브라이징을 염두해 두고 부터는 포기했던 부분인데 너무 감사하네요
이런 좋은글에 댓글이 너무 없는게 제가 다 속상합니다. -
gnee
2008.07.12 21:07
정말 유용하군요;
와 감사합니다.
찾고있었던것을 바로 발견햇거든요 ㅎㅎ -
상오기
2009.03.21 01:59
1.1.5 버전에서 적용하려고 하니 복사되었다라는 창은 뜨는데 실제 복사는 되지 않네요 ^^;; -
Love_Park
2012.10.13 17:09
일단 저도 받아 갑니다.
그런데 컴맹이라 따라해서 고칠수 있을지 의문이네요.
감사합니다 ^^
제목 | 글쓴이 | 날짜 |
---|---|---|
제한된 외국 호스팅 환경에 맞추어 쓰기..... [5] | Falls Too Fast | 2007.11.20 |
XP 환경에서의 속도 저하 문제 해결 (Apache 2.2.X) [2] | Netsblue | 2007.11.20 |
분류(category) 필수로 입력받기 [9] | Diver | 2007.11.20 |
제한된 서버에서 ZBXE가 돌아가도록 설정하기 [2] | Falls Too Fast | 2007.11.22 |
(글) 첨부 파일 날짜 출력 및 아이콘 표시 [1] | Simulz | 2007.11.22 |
XE treeview [4] | 앙데르센 | 2007.11.22 |
글쓴이 이메일 정보 감추기 [2] | 대암지기 | 2007.11.22 |
배경이미지기능으로 페이지꾸미기 [3] | 팔공산 | 2007.11.23 |
소스에서 php short tags 제거하기 [1] | 토우코 | 2007.11.24 |
클립보드로 텍스트 복사하기 [5] | 베니 | 2007.11.24 |
윈도우 라이브 메신저를 홈페이지 서명난에 달자 [1] | Diver | 2007.11.26 |
[동영상 강좌1] zbxe 설치하기 [120] | 필반 | 2007.11.26 |
팁이라긴.. 약하지만;; Trac을 이용한 최신버전을 다운로드 받자!! [3] | 동균84 | 2007.11.26 |
MSN로그인 상태를 홈피좌측 메뉴에 삽입하는 방법 [9] | 팔공산 | 2007.11.27 |
(회원정보) 보기 페이지에서 포인트 변경하기 [4] | Simulz | 2007.11.28 |
google base 사용기. | font | 2007.11.29 |
메뉴에 이미지버튼 사용하기 [11] | 정낙훈(xynex) | 2007.11.29 |
(포인트) 선물하기 [9] | Simulz | 2007.11.30 |
위젯배경이미지방 오픈했습니다. [2] | 팔공산 | 2007.12.03 |
[동영상 강좌2] zbxe 페이지 생성과 기능 설명 [45] | 필반 | 2007.12.03 |
와~ 많은 분들이 바라던 그 팁인거 같은데요..
트랙백 클릭시 주소 자동 복사하는거..맞나요?
아쉬운 점은 xe에 기본으로 세팅되면 더 좋지 않을까 싶네요.
항상 그렇지만 소스 수정방식은 저 같은 초보자들은 나중에 어디에 몰 고쳤는지
확인하기 힘들다는 ㅜㅜㅋ