오늘 오픈소스 게시판을 익스플로어11에 맞게 좀 수정을 해봤는데요... 블록

제가 오늘 오픈소스 게시판 수정증보판 덧글 미리보기 부분을 익스플로어11에서 테스트 하면서 이상하게 미리보기가 안돼 소스를 점검하게 되었는데 이게 기존 자바스크립트 소스가 전혀 호환이 안되기 때문에 많은 부분을 수정해야 하겠더군요. 왜 크롬, 파이어팍스나 익스플로어 이전 브라우저 버전에선 멀쩡하게 돌아가는 자바스크립트 소스가 익스플로어11에선 먹통이 되는지 정말 이해할 수가 없습니다. [이전 소스] 에서 document.write.X 부분을 [수정된 소스] 에서 전부 getElementById 로 바꿨는데 [두번째 이미지] 를 보시면 아시겠지만 이렇게 다 고쳐도 document.write.submit(); 부분에서 에러가 뜨면서 미리보기를 클릭했을 때 제대로 보이질 않습니다. 혹시 submit() 을 어떻게 처리해야 하는지 아시는 분 계신가요? ㅡ_ㅡ;

왜 멀쩡하게 돌아가는 자바스크립트 소스를 익스11 때문에 수정해야 하는지 이해할 수가 없습니다.

[이전 소스- script_comment.php]
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
 
<script language="javascript">
function unlock()
{
    check_attack.check.value=0;
}
 
function check_submit()
{
    if(document.check_attack.check.value==1)
    {
        alert('글쓰기 버튼을 여러번 누르시면 안됩니다');
        return false;
    }
 
<? if(!$member[no]) { ?>
    if(!document.write.name.value)
    {
        alert('이름을 입력하여 주세요.');
        document.write.name.focus();
        return false;
    }
 
    if(!document.write.password.value)
    {
        alert('암호를 입력하여 주세요.\n\n암호를 입력하셔야 수정/삭제를 할수 있습니다');
        document.write.password.focus();
        return false;
    }
 
    var nStr=document.write.name.value;
    var pStr=document.write.password.value;
 
    var nLen=nStr.length;
    var pLen=pStr.length;
    var cnt=0;
 
    for(i=0;i<nLen;i++){
        if(nStr.substr(i,1)=="\"") cnt++;
    }
    if(cnt>0){
        alert("이름에 \" 문자가 들어가 있습니다.");
        document.write.name.focus();
        return false;
    }
 
    cnt=0;
    for(i=0;i<pLen;i++){
        if(pStr.substr(i,1)=="\"") cnt++;
    }
    if(cnt>0){
        alert('패스워드에 \" 문자가 들어가 있습니다.');
        document.write.password.focus();
        return false;
    }
 
<? } ?>
 
    var rPattern=/\|\|\|\d+\|\d+$/g;
    var rStr=document.write.memo.value;
 
    if(!rStr)
    {
        alert('내용을 입력하여 주세요.');
        document.write.memo.focus();
        return false;
    }
 
    if(rStr.match(rPattern)!= null){
        alert('예약된 문자열은 사용할 수 없습니다.');
        document.write.memo.focus();
        return false;
    }
 
    document.check_attack.check.value=1;
    show_waiting();
    hideImageBox();
 
    document.getElementById('is_secret').disabled = false;
 
    return true;
}
 
var imageBoxHandler;
function showImageBox(id) {
    imageBoxHandler= window.open("image_box.php?id="+id,"imageBox","width=600,height=540,resizable=yes,scrollbars=yes,toolbars=no");
}
 
function hideImageBox() {
    if(imageBoxHandler) {
        if(imageBoxHandler != 'undefined') {
            if(imageBoxHandler.closed==false) imageBoxHandler.close();
        }
    }
}
 
var codeBoxHandler;
function showCodeBox() {
    codeBoxHandler= window.open("pop_code.php","codebox","width=830,height=500,left=1,top=1,toolbar=no,scrollbars=yes");
}
 
function view_preview() {
    var rPattern=/\|\|\|\d+\|\d+$/g;
    var rStr=document.write.memo.value;
 
    if(!rStr)
    {
        alert('내용을 입력하여 주세요..');
        document.write.memo.focus();
        return false;
    }
 
    if(rStr.match(rPattern)!= null){
        alert('예약된 문자열은 사용할 수 없습니다..');
        document.write.memo.focus();
        return false;
    }
    document.write.action = "view_preview2.php";
    document.write.target = "_blank";
    document.write.submit();
    document.write.action = "comment_ok.php";
    document.write.target = "_self";
}
 
function check_use_html2(obj) {
    var c_n;
    if(!obj.checked) {
        obj.value=1;
    } else {
        c_n = confirm("자동 줄바꿈을 하시겠습니까?\n\n자동 줄바꿈은 게시물 내용중 줄바뀐 곳을<br>태그로 변환하는 기능입니다.");
        if(c_n) {
            obj.value=1;
        } else {
            obj.value=2;
        }
    }
}
 
function show_waiting() {
    var _x = document.body.clientWidth/2 + document.body.scrollLeft - 145;
    var _y = document.body.clientHeight/2 + document.body.scrollTop - 44;
    zb_waiting.style.posLeft=_x;
    zb_waiting.style.posTop=_y;
    zb_waiting.style.visibility='visible';
}
 
function hide_waiting() {
    zb_waiting.style.visibility='hidden';
    check_attack.check.value=0;
}
 
function insert_tag(str)
{
    var objSelection = document.selection;
    var objTextArea = document.getElementById('memo');
    objTextArea.focus();
    
    if(typeof objSelection != 'undefined'//IE
    {
        var sRange = objSelection.createRange();
        //var selectedText = sRange.text;
        sRange.text = str;
    }
    else if(typeof objTextArea.selectionStart != 'undefined'//FF
    {
        var sStart = objTextArea.selectionStart;
        var sEnd = objTextArea.selectionEnd;
        objTextArea.value = objTextArea.value.substr(0, sStart) + str + objTextArea.value.substr(sEnd);
        objTextArea.selectionStart = objTextArea.selectionEnd = sStart + 1;
    }
    else
    {
        objTextArea.value += str;
    }
}
 
function doTab(arg1){
    var k;
    if("which" in arg1){k=arg1.which;}
    else if("keyCode" in arg1){k=arg1.keyCode;}
    else if("keyCode" in window.event){k=window.event.keyCode;}
    else if("which" in window.event){k=arg1.which;}
    else{return true;}
 
    if(k == 9) {
        insert_tag("\t");
        return false;
    }
    return true;
}
</script>
<form name=check_attack><input type=hidden name=check value=0></form>
<div id='zb_waiting' style='position:absolute; left:50px; top:120px; width:292; height: 91; z-index:1; visibility: hidden'>
<table border=0 width=98% cellspacing=1 cellpadding=0 bgcolor=black>
<form name=waiting_form>
<tr bgcolor=white>
    <td>
        <table border=0 cellspacing=0 cellpadding=0 width=100%>
        <tr>
            <td><img src=images/waiting_left.gif border=0></td>
            <td><img src=images/waiting_top.gif border=0><br><img src=images/waiting_text.gif></td>
        </tr>
        </table>
    </td>
</tr>
</form>
</table>
</div>
 


[수정된 소스- script_comment.php]
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
 
<script language="javascript">
function unlock()
{
    check_attack.check.value=0;
}
 
function check_submit()
{
    var rName=document.getElementById('name');
    var rPass=document.getElementById('password');
    if(document.check_attack.check.value==1)
    {
        alert('글쓰기 버튼을 여러번 누르시면 안됩니다');
        return false;
    }
 
<? if(!$member[no]) { ?>
    if(!rName.value)
    {
        alert('이름을 입력하여 주세요.');
        rName.focus();
        return false;
    }
 
    if(!rPass.value)
    {
        alert('암호를 입력하여 주세요.\n\n암호를 입력하셔야 수정/삭제를 할수 있습니다');
        rPass.focus();
        return false;
    }
 
    var nStr=rName.value;
    var pStr=rPass.value;
 
    var nLen=nStr.length;
    var pLen=pStr.length;
    var cnt=0;
 
    for(i=0;i<nLen;i++){
        if(nStr.substr(i,1)=="\"") cnt++;
    }
    if(cnt>0){
        alert("이름에 \" 문자가 들어가 있습니다.");
        rName.focus();
        return false;
    }
 
    cnt=0;
    for(i=0;i<pLen;i++){
        if(pStr.substr(i,1)=="\"") cnt++;
    }
    if(cnt>0){
        alert('패스워드에 \" 문자가 들어가 있습니다.');
        rPass.focus();
        return false;
    }
 
<? } ?>
 
    var rPattern=/\|\|\|\d+\|\d+$/g;
    var rStr=document.getElementById('memo');
 
    if(!rStr.value)
    {
        alert('내용을 입력하여 주세요.');
        rStr.focus();
        return false;
    }
 
    if(rStr.match(rPattern)!= null){
        alert('예약된 문자열은 사용할 수 없습니다.');
        rStr.focus();
        return false;
    }
 
    document.check_attack.check.value=1;
    show_waiting();
    hideImageBox();
 
    document.getElementById('is_secret').disabled = false;
 
    return true;
}
 
var imageBoxHandler;
function showImageBox(id) {
    imageBoxHandler= window.open("image_box.php?id="+id,"imageBox","width=600,height=540,resizable=yes,scrollbars=yes,toolbars=no");
}
 
function hideImageBox() {
    if(imageBoxHandler) {
        if(imageBoxHandler != 'undefined') {
            if(imageBoxHandler.closed==false) imageBoxHandler.close();
        }
    }
}
 
var codeBoxHandler;
function showCodeBox() {
    codeBoxHandler= window.open("pop_code.php","codebox","width=830,height=500,left=1,top=1,toolbar=no,scrollbars=yes");
}
 
function view_preview() {
    var rPattern=/\|\|\|\d+\|\d+$/g;
    var rStr=document.getElementById('memo');
 
    if(!rStr.value)
    {
        alert('내용을 입력하여 주세요..');
        rStr.focus();
        return false;
    }
 
    if(rStr.value.match(rPattern)!= null){
        alert('예약된 문자열은 사용할 수 없습니다..');
        rStr.focus();
        return false;
    }
    document.write.action = "view_preview2.php";
    document.write.target = "_blank";
    document.write.submit();
    document.write.action = "comment_ok.php";
    document.write.target = "_self";
}
 
function check_use_html2(obj) {
    var c_n;
    if(!obj.checked) {
        obj.value=1;
    } else {
        c_n = confirm("자동 줄바꿈을 하시겠습니까?\n\n자동 줄바꿈은 게시물 내용중 줄바뀐 곳을<br>태그로 변환하는 기능입니다.");
        if(c_n) {
            obj.value=1;
        } else {
            obj.value=2;
        }
    }
}
 
function show_waiting() {
    var _x = document.body.clientWidth/2 + document.body.scrollLeft - 145;
    var _y = document.body.clientHeight/2 + document.body.scrollTop - 44;
    zb_waiting.style.posLeft=_x;
    zb_waiting.style.posTop=_y;
    zb_waiting.style.visibility='visible';
}
 
function hide_waiting() {
    zb_waiting.style.visibility='hidden';
    check_attack.check.value=0;
}
 
function insert_tag(str)
{
    var objSelection = document.selection;
    var objTextArea = document.getElementById('memo');
    objTextArea.focus();
    
    if(typeof objSelection != 'undefined'//IE
    {
        var sRange = objSelection.createRange();
        //var selectedText = sRange.text;
        sRange.text = str;
    }
    else if(typeof objTextArea.selectionStart != 'undefined'//FF
    {
        var sStart = objTextArea.selectionStart;
        var sEnd = objTextArea.selectionEnd;
        objTextArea.value = objTextArea.value.substr(0, sStart) + str + objTextArea.value.substr(sEnd);
        objTextArea.selectionStart = objTextArea.selectionEnd = sStart + 1;
    }
    else
    {
        objTextArea.value += str;
    }
}
 
function doTab(arg1){
    var k;
    if("which" in arg1){k=arg1.which;}
    else if("keyCode" in arg1){k=arg1.keyCode;}
    else if("keyCode" in window.event){k=window.event.keyCode;}
    else if("which" in window.event){k=arg1.which;}
    else{return true;}
 
    if(k == 9) {
        insert_tag("\t");
        return false;
    }
    return true;
}
</script>
<form name=check_attack><input type=hidden name=check value=0></form>
<div id='zb_waiting' style='position:absolute; left:50px; top:120px; width:292; height: 91; z-index:1; visibility: hidden'>
<table border=0 width=98% cellspacing=1 cellpadding=0 bgcolor=black>
<form name=waiting_form>
<tr bgcolor=white>
    <td>
        <table border=0 cellspacing=0 cellpadding=0 width=100%>
        <tr>
            <td><img src=images/waiting_left.gif border=0></td>
            <td><img src=images/waiting_top.gif border=0><br><img src=images/waiting_text.gif></td>
        </tr>
        </table>
    </td>
</tr>
</form>
</table>
</div>
 


[익스플로어11에서 input 태그 네임 속성으로 지정한 부분이 에러가 나는 화면]

[익스플로어11에서 submit() 메서드 부분이 에러가 나는 화면]

덧글

  • 희망의빛™ 2014/10/15 18:24 # 답글

    이번엔 덧글 미리보기만 가지고 이야기했지만 오픈소스 게시판 전체 소스를 익스플로어11과 호환성을 맞추기 위해선 개 노가다 작업이 필요합니다. 완전 MS가 개발자들 골탕먹이려고 작정한 건 아니겠지요? 크롬이 예전에 한차례 브라우저 동작 방식을 변경해 크게 애먹었던 적을 기억하고 계신분이 계실지 모르겠네요. 이번엔 더 심각한 오동작을 일으키고 있는 건 아닌지 모르겠습니다. 왜 개발자들이 브라우저가 상위 버전으로 업그레이드가 되면서 이런 불필요한 노가다 작업을 해야 하는지 정말 모르겠습니다. 제가 보기엔 ActiveX 동작 방식도 많이 변경이 됐을 것 같은데 보안상 좋지 않은 이런 방식을 고집하면서 왜 자바스크립트 호환성은 헌신짝 버리듯 내쳐서 버린 건지 익스플로어11을 정말 아무리 이해하려고 해도 이해할 수가 없네요 저로선...
  • WeissBlut 2014/10/15 18:19 # 답글

    보안상으로도 안좋고 호환성으로도 안좋은 제로보드4 기반 게시판을 왜 굳이 고집하는지 정말 아무리 이해하려고 해도 이해할수가 없네요
  • 희망의빛™ 2014/10/15 18:34 #

    아마도 빠른 기존 동작 방식을 보수해 사용하려고 하는 일환이겠지요. 근데 기존에 동작하는 명령어들은 새버전의 브라우저가 좀 지원을 해줬으면 좋겠습니다. 완전 익스플로어11 보면 구 버전의 웹사이트들은 지원하지 않겠다는 고의적 의도가 깔려 있는 건 아닌지 의심스럽기까지 합니다. 이 정도면 그런 의심 해볼 수 있지 않을까요? ㅡ_ㅡ 그래서 현재 많은 웹사이트들이 익스플로어11 상에서 제대로 동작하지 않고 있죠. 본문에서와 같이 이전에 동작하던 코드가 새 브라우저에서 전혀 동작하지 않으면서 말이죠.
  • Hide_D 2014/10/15 19:05 # 답글

    IE11 이야기를 하기 전에 먼저 문서에 Doctype 부터 제대로 지정하시는게 어떨지...

    + 브라우저간 호환성 이야기를 하고 싶다면, 적어도 jQuery는 씁시다.
  • 희망의빛™ 2014/10/22 21:13 #

    근데 Doctype 지정하면 어떤 이점이 있는 건가요? 외람된 질문인지 모르겠습니다만...
댓글 입력 영역
* 비로그인 덧글의 IP 전체보기를 설정한 이글루입니다.


웹로그 검색