크롬에서 클립보드 복사 기능 구현하려다 심력만 낭비했네요. 블록

크롬에서 클립보드 복사 기능 만든다고 했다가 열라 삽질만 하고 제대로 구현을 하지 못했네요. 이게 좀 이상한게 인터넷에서 다운받은 테스트 페이지는 호스팅 가상 디렉토리 안에서 실행시키면 제대로 버튼이 보이는데 게시판 소스에 붙여넣기만 하면 버튼이 보이지 않습니다. 플래시 swf 파일로 클립보드 기능을 사용하는 것인데 완전체 소스 그대로 붙여넣기 해도 이 놈이 추가로 덧붙인 iframe 안에서만 동작하지 iframe을 벗겨내면 전혀 동작을 하지 않습니다.

뭐랄까 참 짜증나게 만드는 현상이더군요. 이 문제의 원인 아시는 분 계신가요?

제가 이동 중인 관계로 소스는 집에 가서 제공해 드리겠습니다. 불완전한 클립보드 기능 구현하느니 이글루스 처럼 서버 저장 공간에 저장하는 방식을 취해야 한다는 건데 왜 그런 식으론 구현하기가 싫은 거죠?

이 문제 때문에 소중한 토요일이 홀라당 날라갔네요.

첨부파일: clipboard.rar

첨부파일 압축을 풀어 제로보드 서버 www/bbs 폴더에 푸시면 되는데 clipboard.html 이나 clipboard.php 를 실행하시면 테스트 페이지가 열립니다. 이렇게 하면 클립보드 동작을 테스트 할 수 있는데 이 소스를 ed_seting_edit.php 중간에 아래와 같이 추가하면 테스트 페이지의 버튼이 보이지가 않으면서 제대로 동작하지를 않는다는 겁니다. 근데 두번째 소스와 같이 iframe을 만들어 동작시키면 제대로 버튼이 보이고 클립보드도 크롬에서 제대로 동작합니다.

현재 다음 링크에 첫번째 소스를 적용했으니 테스트해 보시기 바랍니다. 익명글쓰기로 테스트 하시면 됩니다. http://www.blrun.net/bbs/zboard.php?id=add1

[첫번째 소스- 25행 부터 44행까지 추가]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 
<!--====================[ sw_edit 파일명: ed_seting_edit.php ]====================-->
<table width='100%' id='ed_toolbar' name='ed_toolbar' border='0' cellpadding='0' cellspacing='0'>
<tr>
<td>
<? if($sw_edit_yn == "Y") { ?>
    <table width='100%' border='0' cellpadding='3' cellspacing='0' class='sw_bd_style_5'>
    <tr>
        <td>
<?
if($setup['use_html'] > 0) {
    include("$dir/swe/ed_toolbar.php");
else {
    include("$dir/swe/ed_toolbar_no_grant.php");
}
?>
        </td>
    </tr>
    </table>
<? } ?>
</td>
</tr>
</table>
 
<script type="text/javascript" src="clipboard.js"></script>
<script language="JavaScript">
var jsonParameter = {};
jsonParameter.clipboardCopy = "clipboard.swf";    //필수값, swf 경로
jsonParameter.fieldName = "contents";            //필수값, 복사할 내용의 field id
jsonParameter.width = "44";                        //버튼 너비
jsonParameter.height = "20";                    //버튼 높이
jsonParameter.instanceName = "clipboard";        //필수값, var clipboard = new Clipboard(obejct); 할경우 변수명인 "clipboard"를 문자열로 지정
jsonParameter.img = "btn_get_v2.gif";            //디폴드 값을 원하면 아예 삭제
jsonParameter.callback = clipboardCallback;        //callback 함수
 
function clipboardCallback(){
    alert("내용이 클립보드로 복사되었습니다.\n\n에러시 Ctrl+V 키로 붙여넣으세요!");
}
</script>
 
<div>
<script>var clipboard = new Clipboard( jsonParameter );</script>
</div>
<textarea id="contents" name="contents" cols=90 rows=18></textarea>
 
<div id='edit_windowdiv' name='edit_windowdiv' style='width:100%;'>  
<table width='100%' height='100%' border='0' cellpadding='0' cellspacing='0' class='sw_bd_style_6' style='table-layout:fixed'>
<tr>
<td align='center'>
    <iframe id='memoi' name='memoi' style='width:100%; height:100%; display:none;' onbeforedeactivate='deactivate_handler()' scrolling='yes' frameborder='no' border='0' ALLOWTRANSPARENCY='true'></iframe>
    <textarea id='memo' name='memo' style='width:100%; height:100%; display:block;' class='sw_bd_style_7' onkeydown='return doTab(event,this);'><?if($mode=="modify"||($mode=="reply"&&!$c_no)){ echo "$memo"; } ?></textarea>
</td>
</tr>
</table>
</div>
<SCRIPT language="JavaScript">
if(sw_edit_use == "write") {
    edit_windowdiv.style.height = "300px";
else {
    edit_windowdiv.style.height = "150px";
    document.getElementById("ed_toolbar").style.display = "none";
}
</SCRIPT>
<!--====================[ sw_edit 파일명: ed_seting_edit.php 끝]====================-->
 


[두번째 소스- iframe 안에 테스트 페이지를 넣음, 25행]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
<!--====================[ sw_edit 파일명: ed_seting_edit.php ]====================-->
<table width='100%' id='ed_toolbar' name='ed_toolbar' border='0' cellpadding='0' cellspacing='0'>
<tr>
<td>
<? if($sw_edit_yn == "Y") { ?>
    <table width='100%' border='0' cellpadding='3' cellspacing='0' class='sw_bd_style_5'>
    <tr>
        <td>
<?
if($setup['use_html'] > 0) {
    include("$dir/swe/ed_toolbar.php");
else {
    include("$dir/swe/ed_toolbar_no_grant.php");
}
?>
        </td>
    </tr>
    </table>
<? } ?>
</td>
</tr>
</table>
 
<iframe src="clipboard.php" style='width:100%; height:320px'></iframe>
 
<div id='edit_windowdiv' name='edit_windowdiv' style='width:100%;'>  
<table width='100%' height='100%' border='0' cellpadding='0' cellspacing='0' class='sw_bd_style_6' style='table-layout:fixed'>
<tr>
<td align='center'>
    <iframe id='memoi' name='memoi' style='width:100%; height:100%; display:none;' onbeforedeactivate='deactivate_handler()' scrolling='yes' frameborder='no' border='0' ALLOWTRANSPARENCY='true'></iframe>
    <textarea id='memo' name='memo' style='width:100%; height:100%; display:block;' class='sw_bd_style_7' onkeydown='return doTab(event,this);'><?if($mode=="modify"||($mode=="reply"&&!$c_no)){ echo "$memo"; } ?></textarea>
</td>
</tr>
</table>
</div>
<SCRIPT language="JavaScript">
if(sw_edit_use == "write") {
    edit_windowdiv.style.height = "300px";
else {
    edit_windowdiv.style.height = "150px";
    document.getElementById("ed_toolbar").style.display = "none";
}
</SCRIPT>
<!--====================[ sw_edit 파일명: ed_seting_edit.php 끝]====================-->
 

덧글

  • anchor 2014/11/01 14:35 # 답글

    정품이 아니라서요
  • ... 2014/11/01 14:50 # 삭제 답글

    개도 자기 싫다고 하는 사람정돈 구분한다. 이글루스밸리에 당신좋아하는 사람 아무도 없다고. 이 개보다 못한인간아. 당신 삽질에 답변해줄 사람없으니까 밸리로 글쏘지 말라니까.
  • 2014/11/01 14:56 # 삭제 답글

    알려줄 사람 없을 듯
  • 긁적 2014/11/01 15:22 #

    알려줄 사람이 있다는 걸 악용하는 거 같아요....

    근데 알려줘도 못받아먹은 선례가 있다는 게 함정-_-
  • 긁적 2014/11/01 15:20 # 답글

    그냥 만들지 말고 딴일 알아봐라..... 제발.
  • Hide_D 2014/11/01 17:46 # 답글

    첫번째 소스를 적용하면 일단 콘솔에 '무슨 에러가 뜨는지' 확인해 보셨나요.
  • 희망의빛™ 2014/11/01 18:15 #

    캐쉬를 비우고 광고게시판을 클릭해 글쓰기를 시도하면 아래와 같은 콘솔 에러 메시지가 뜹니다. 두번째 clipboard.js 98 행이 object is not a function 이라고 뜨네요. 그 행은 document.write(strClipboardFlash); 가 적혀 있는 행입니다만... 이것과 상관이 있나요? IE8에선 자바스크립트 오류가 뜨지 않아서 이것까진 미처 생각을 못했네요. ㅡ_ㅡ; 지금 광고게시판에 첫번째 소스를 적용해 놨습니다.
    =====================================================================================

    Uncaught Error: Attempting to use a disconnected port object extensions::messaging:70
    Uncaught TypeError: object is not a function clipboard.js:98
    Failed to load resource: net::ERR_CACHE_MISS http://www.blrun.net/
    Failed to load resource: net::ERR_CACHE_MISS http://www.blrun.net/fr_top.htm
    Failed to load resource: net::ERR_CACHE_MISS http://www.blrun.net/fr_left.htm
    Failed to load resource: net::ERR_CACHE_MISS http://www.blrun.net/fr_right.htm
  • 희망의빛™ 2014/11/01 18:26 #

    그러고 보니 두번째 소스에선 해당 오류가 뜨지 않네요. 헐~ 이건 또 뭐지? ㅡ_ㅡ;
  • Miyun_86 2014/11/01 19:20 # 삭제

    결론 : 상황따라 브라우저별로 땜질만 하다보니 표준화도 안 되어 있어서 되는 브라우저가 있고 안 되는 브라우저가 있네요? 지금까지 삽질했어요^^

    ......프로그래밍 기본 설계 책을 좀 보던가, 아니면 호환성 때려치고 그 잘난 XP에나 맞춰서 "난 XP에서만큼은 졸라 잘 돌아가는거 만듬^^"하면서 자위하던가요. 어설프게 코드 걸레로 만들면서 계속 밸리 발행하고 징징대지말구요.
  • PFN 2014/11/01 23:00 #

    도와주지 마세요

    욕만 처먹고 감사도 사과도 없이 쌩깝니다.

    보세요 조금 도와줄것 같으니까 번개같이 질문 펴놓잖아요

    절대 낚이지 마세요

    낚이시면 낚이실수록 밸리에 똥글이 많아집니다
  • 미르 2014/11/01 18:12 # 답글

    또 복붙 잘못했으니 오류 떴겠지 뭐.
  • 희망의빛™ 2014/11/02 04:55 # 답글

    출처에 아래와 같은 내용이 있던데 이것과 관련된 문제가 아닌가 싶기도 합니다. 근데 단독이나 iframe 안에서 실행시키면 또 되잖아요. 괜한 골칫거리를 만든 건 아닌지 모르겠네요. 그렇다면 swf 파일을 디컴파일해서 수정해 다시 만들어야 된다는 이야기인데... 쩝 거기까진 기술적으로 좀 손대기가 꺼려지네요. 너무 편법같다는 생각이 들어서...
    ===========================================================================

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

    파일 업로드 버튼이나. 클립보드 복사 버튼이 flash에 포함되지 않고 html의 javascript에서 flash를 호출하면 작동이 되지 않는다는 내용입니다.
    flash와 연동할 일이 있으면 flash 쪽으로 이미지경로는 보내서 flash 쪽에서 노출되게 하고. 액션의 시작이 flash에서 시작해야합니다.!!
  • 희망의빛™ 2014/11/02 09:57 # 답글

    일단 해당 게시판 소스는 원상복구했네요. 방법도 마땅치가 않고 쉽지 않은 문제라 일단 정상적인 서비스를 만들어 놔야 하기 때문에 소스를 원상복구했습니다. 이용에 참고하시기 바랍니다.
댓글 입력 영역
* 비로그인 덧글의 IP 전체보기를 설정한 이글루입니다.


웹로그 검색