제로보드에서 내용 미리보기를 하는데 이상한 문제가 있네요. 블록

제가 다음 소스를 관리자 모드(html 모든 권한이 가능)로 글쓰기 textarea 에 소스 붙여넣기 한 다음 html 줄바꿈하지 않는 모드로 미리보기를 해 보았더니 미리보기는 제대로 보이는데 이상하게 자바스크립트가 동작하지 않는 겁니다. 근데 내용 쓰기를 완료한 뒤 자바스크립트를 동작시켜 보면 제대로 동작이 됩니다.

그래서 다른 브라우저에서 미리보기 동작이 어떤가 살펴봤더니 익스플로어와 파이어팍스에선 제대로 미리보기 상태에서도 자바스크립트가 동작합니다. 근데 크롬/스윙/오페라/사파리 에선 미리보기 상태에서 자바스크립트가 동작하질 않네요.

하도 이상해서 미리보기 화면에서 소스보기를 한 뒤 소스를 드래그해 test1.html 이란 파일을 만들었습니다. 그게 두번째 소스입니다. 이 파일을 /bbs 폴더에 카피한 후 http://www.blrun.net/bbs/test1.html 로 접근하면 정상적으로 자바스크립트가 동작합니다.

웹킷 엔진을 쓰는 브라우저의 어떤 버그같아 보이는데 원인을 잘 모르겠네요. ㅡ_ㅡ;

왜 preview.php의 서버페이지 파일 처리를 거친 미리보기에선 자바스크립트가 동작하지 않고 test1.html 페이지에선 정상적으로 미리보기 상태에서 자바스크립트가 동작하는지 정말로 이상합니다. 뭐 중요한 버그는 아니지만 모르니까 많이 답답하네요.

[미리보기를 하기 위해 textarea 에 입력한 소스]
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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<meta name="viewport" content="width=device-width">
<SCRIPT LANGUAGE="JavaScript">
<!--
function Result() {
var txt = "<br><br>당신이 이성 친구를 사귈 때는 첫째, <b>" + document.form.list.options[0].value + "</b>(" +  document.form.list.options[0].text + ")를 보고 둘째, <b>" + document.form.list.options[1].value + "</b>(" + document.form.list.options[1].text + ")를 보며 셋째, <b>" + document.form.list.options[2].value + "</b>(" + document.form.list.options[2].text + ")를 본다!";
document.getElementById("txtPanel").innerHTML = txt;
}
 
function move(index,to) {
var list = document.form.list;
var total = list.options.length-1;
if (index == -1) return false;
if (to == +1 && index == total) return false;
if (to == -1 && index == 0) return false;
var items = new Array;
var values = new Array;
for (i = total; i >= 0; i--) {
items[i] = list.options[i].text;
values[i] = list.options[i].value;
}
for (i = total; i >= 0; i--) {
if (index == i) {
list.options[i + to] = new Option(items[i],values[i], 0, 1);
list.options[i] = new Option(items[i + to], values[i + to]);
i--;
}
else {
list.options[i] = new Option(items[i], values[i]);
   }
}
list.focus();
}
// -->
</script>
</head>
<body>
<b><font color="navy">지금 여러분의 집에서 갑자기 동시에 현관 초인종이 울리고 안방에서 아기가 울며 가스렌지의 물이 끓고 있습니다. 당신이라면 직감적으로 어느 일부터 먼저 하시겠습니까? 순서대로 이동시켜 나열해 보세요.</font></b>
<br><br>
결과보기를 클릭하면 밑에 바로 결과가 나옵니다.<br><br>
 
<form method="post" action="" name="form">
<table width=660 border=0>
        <tr>
                <td width=30 valign="middle">
                <select name="list" size="3">
                <option value="외모">초인종</option>
                <option value="성격">아기</option>
                <option value="재산">끓는 물</option>
                </select><br><br>
                <input type="button" value="결과보기" onClick="Result()">
                </td>
                <td width=30 valign="top">
                <input type="button" value="↑" onClick="move(this.form.list.selectedIndex,-1)"><br><br>
                <input type="button" value="↓" onClick="move(this.form.list.selectedIndex,+1)">
                </td>
                <td width=600>&nbsp;</td>
        </tr>
        <tr>
                <td colspan=3 width=100%><div id="txtPanel"></div></td>
        </tr> 
</table>
</form>
</body>
</html>

[상기 소스를 textarea 상태에서 미리보기 한 후 자바스크립트가 동작하지 않는 페이지를 소스보기로 켑쳐한 것]
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
 
<html>
<head>
<title>광고게시판</title>
<meta http-equiv=Content-Type content=text/html; charset=EUC-KR>
<meta name="viewport" content="width=device-width">
<link rel=StyleSheet HREF=skin/f2plus_gallery_2_0/style.css type=text/css title=style>
 
<!-- SyntaxHighlighter 관련 헤더 -->
<link rel="stylesheet" type="text/css" href="syntaxhighlighter/styles/shThemeDefault.css" />
<link rel="stylesheet" type="text/css" href="syntaxhighlighter/styles/shCore.css" />
 
<SCRIPT type="text/javascript" src="syntaxhighlighter/scripts/jquery-1.7.1.min.js"></SCRIPT>
<script type="text/javascript" src="syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shAutoloader.js"></script>
<SCRIPT type="text/javascript" src="syntaxhighlighter/scripts/jQuery.js"></SCRIPT>
 
<!-- 이미지 리사이즈를 위해서 처리하는 부분 -->
<script>
    function zb_img_check(){
        var zb_main_table_width = document.zb_get_table_width.width - 50;
        var zb_target_resize_num = document.zb_target_resize.length;
        for(i=0;i<zb_target_resize_num;i++){ 
            if(document.zb_target_resize[i].width > zb_main_table_width) {
                document.zb_target_resize[i].height = document.zb_target_resize[i].height * zb_main_table_width / document.zb_target_resize[i].width;
                document.zb_target_resize[i].width = zb_main_table_width;
            }
        }
    }
    window.onload = zb_img_check;
</script>
 
</head>
<body topmargin='10'  leftmargin='10' marginwidth='10' marginheight='10'  bgcolor=white>
<table border=0 cellspacing=0 cellpadding=0 width=100% height=1 style="table-layout:fixed;">
<col width=100%></col>
<tr>
    <td><img src=images/t.gif border=0 width=98% height=1 name=zb_get_table_width><br><img src=images/t.gif border=0 name=zb_target_resize width=1 height=1></td>
</tr>
</table>
<table border=0 width= cellspacing=0 cellpadding=0 bgcolor=white style=table-layout:fixed>
<tr>
    <td align=left><img src=images/pv_title_left.gif border=0></td>
    <td width=100% background=images/pv_title_back.gif><img src=images/pv_title_back.gif></td>
    <td align=right><img src=images/pv_title_right.gif border=0></td>
</tr>
</table>
<table border=0 cellspacing=0 cellpadding=10 width=100% height=100% bgcolor=black style=table-layout:fixed>
<tr bgcolor=white valign=top>
    <td height=40 class=title2_han>
        <b>제목: yyyy</b><br>
    </td>
</tr>
<tr bgcolor=white valign=top>
    <td>
          <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<meta name="viewport" content="width=device-width">
<SCRIPT LANGUAGE="JavaScript">
<!--
function Result() {
var txt = "<br><br>당신이 이성 친구를 사귈 때는 첫째, <b>" + document.form.list.options[0].value + "</b>(" +  document.form.list.options[0].text + ")를 보고 둘째, <b>" + document.form.list.options[1].value + "</b>(" + document.form.list.options[1].text + ")를 보며 셋째, <b>" + document.form.list.options[2].value + "</b>(" + document.form.list.options[2].text + ")를 본다!";
document.getElementById("txtPanel").innerHTML = txt;
}
 
function move(index,to) {
var list = document.form.list;
var total = list.options.length-1;
if (index == -1) return false;
if (to == +1 && index == total) return false;
if (to == -1 && index == 0) return false;
var items = new Array;
var values = new Array;
for (i = total; i >= 0; i--) {
items[i] = list.options[i].text;
values[i] = list.options[i].value;
}
for (i = total; i >= 0; i--) {
if (index == i) {
list.options[i + to] = new Option(items[i],values[i], 0, 1);
list.options[i] = new Option(items[i + to], values[i + to]);
i--;
}
else {
list.options[i] = new Option(items[i], values[i]);
   }
}
list.focus();
}
// -->
</script>
</head>
<body>
<b><font color="navy">지금 여러분의 집에서 갑자기 동시에 현관 초인종이 울리고 안방에서 아기가 울며 가스렌지의 물이 끓고 있습니다. 당신이라면 직감적으로 어느 일부터 먼저 하시겠습니까? 순서대로 이동시켜 나열해 보세요.</font></b>
<br><br>
결과보기를 클릭하면 밑에 바로 결과가 나옵니다.<br><br>
 
<form method="post" action="" name="form">
<table width=660 border=0>
        <tr>
                <td width=30 valign="middle">
                <select name="list" size="3">
                <option value="외모">초인종</option>
                <option value="성격">아기</option>
                <option value="재산">끓는 물</option>
                </select><br><br>
                <input type="button" value="결과보기" onClick="Result()">
                </td>
                <td width=30 valign="top">
                <input type="button" value="↑" onClick="move(this.form.list.selectedIndex,-1)"><br><br>
                <input type="button" value="↓" onClick="move(this.form.list.selectedIndex,+1)">
                </td>
                <td width=600>&nbsp;</td>
        </tr>
        <tr>
                <td colspan=3 width=100%><div id="txtPanel"></div></td>
        </tr> 
</table>
</form>
</body>
</html>    </td>
</tr>
</table>
</body>
</html>
 
 



덧글

  • 2014/08/21 19:49 # 삭제 답글

    애플 따라쟁이 한다고 헬쥐를 격하게 까시면서 창의력을 발휘해야 한다고 누차 강조 해오시던 분이 이런 사소한문제로 이러시면 안됩니다.
  • 나인테일 2014/08/22 03:26 # 답글

    거 참 피곤하게 사시는 듯. XE 설치 한 번으로 이런 모든 고민에서 해방됩니다.
  • P 2014/08/22 16:58 # 삭제

    그런말씀 마세요. 이 모든 문제가 해결되어 버리면 이 분은 매일 정말 할 일 없이 방바닥만 긁어야 합니다. 자기가 할 일 열심히 스스로 찾는 분이니 그냥 계속 그렇게 살라고 해야할 것 같습니다.
댓글 입력 영역
* 비로그인 덧글의 IP 전체보기를 설정한 이글루입니다.


웹로그 검색