'2006/10'에 해당되는 글 2건
2006/10/18 11:41
FF에서 createElement로 생성한 input element에 focus()를 하려고 할 경우 아래와 같은 에러가 발생하는 문제가 있습니다.
(무조건 발생하는 것이 아니라 특정한 상황에서만 발생합니다.
저같은 경우에는 키보드를 이용하여 트리 구조를 이동하며 동적으로 text input을 생성/삭제하는 기능을 제작할때, 생성한 text input에 focus()를 주면 발생했습니다.)
이 경우 createElement로 생성한 이후에 아래 부분을 추가해주면 해결이 됩니다.
autocomplete 속성이 표준이 아니라는 것이 문제기는 하지만 JS를 이용하여 동적으로 생성해주는 부분이니 이 정도는 애교로 봐줘야(...)
bugzilla에 있는 비슷한 버그 : https://bugzilla.mozilla.org/show_bug.cgi?id=236791
결론. [nsIAutoCompletePopup::selectedIndex] 이런 에러가 날 경우 위와 같이 해주면 해결이 됩니다.
(무조건 발생하는 것이 아니라 특정한 상황에서만 발생합니다.
저같은 경우에는 키보드를 이용하여 트리 구조를 이동하며 동적으로 text input을 생성/삭제하는 기능을 제작할때, 생성한 text input에 focus()를 주면 발생했습니다.)
[Exception... "'XULElement.selectedIndex 1 $X0 p' when callingmethod: [nsIAutoCompletePopup::selectedIndex]" nsresult: "0x8057001e(NS_ERROR_XPC_JS_THREW_STRING)" location: "JS frame ::http://(생략).js :: anonymous :: line266" data: no]
이 경우 createElement로 생성한 이후에 아래 부분을 추가해주면 해결이 됩니다.
input.setAttribute('autocomplete', 'off');
autocomplete 속성이 표준이 아니라는 것이 문제기는 하지만 JS를 이용하여 동적으로 생성해주는 부분이니 이 정도는 애교로 봐줘야(...)
bugzilla에 있는 비슷한 버그 : https://bugzilla.mozilla.org/show_bug.cgi?id=236791
결론. [nsIAutoCompletePopup::selectedIndex] 이런 에러가 날 경우 위와 같이 해주면 해결이 됩니다.
Trackback Address :: http://blog.rsef.net/trackback/39
2006/10/17 09:26
[WEB]
AJAX. 대부분 아시다시피 Asynchronous Javascript And XML의 약어입니다.
비동기의 자바스크립트와 XML이죠.
근데 AJAX로 작업을 해보신 분이라면 아시겠지만 어떤 기능을 AJAX로 구현하게되면 그 기능만을 위한 별도의 XML 페이지를 작업 해야된다는 것을 잘 아실겁니다.
하지만 이렇게 별도의 XML페이지를 제작하게 된다면 당연히 제작/유지/보수에 2배에 가까운 노력이 들게 됩니다.
물론 웹 접근성을 고려해서(이 경우에는 보통 javascript가 disable된 상황) 일반 HTML페이지도 제작한다는 전제하이기는 합니다.
(사실 아쉽지만 대부분의 AJAX로 제작된 사이트들이 이 것을 무시하고 있습니다. 뭐 이런 문제가 있다는 것조차 모르시는 분들이 더 많다는게 문제이기는 합니다만..)
위에서도 말했듯이 2배에 가까운 노력이 드는데도 불구하고(?) 사실 그런 환경으로 웹서핑을 하는 경우가 거의 없기 때문에 얻을 수 있는 효과는 미미합니다. 그렇기 때문에 무시되는 경우가 많죠.
하지만 XML대신 XHTML을 사용한다면 이야기는 조금 달라집니다.
역시나 아시겠지만 XHTML은 XML parser에 의해 parsing이 됩니다.
따라서 애초에 처리되는 페이지를 XHTML로 가능한한 semantic하게 제작을 해두면 큰 노력없이도 AJAX와 웹접근성이라는 두마리 토끼를 다 잡을 수 있습니다.
위의 예제를 실제 작업할 내용으로 변경해보겠습니다.
예제 페이지는 http://rsef.net/Work/xhtml.php(소스는 http://rsef.net/Work/xhtml.phps)입니다.
그 아래 no-cache설정은 실제 작업을 할때는 특별히 고려할 필요는 없겠지만(IE의 경우 xhtml.php와 request.php를 no-cache설정 없이 한개의 window로 볼 경우 문제가 되지만 실제 사용시 그런 경우는 없겠죠.) 이 경우는 예제이다보니 넣겠습니다.
그리고 제가 사용하고 있는 서버는 php의 short_open_tag 설정이 on으로 되어있기 때문에 XML선언부를 echo '<?xml version="1.0" encoding="UTF-8"?>';로 썼습니다.
그럼 이 페이지를 javascript로 요청하는 페이지를 만들어 보겠습니다.
예제 페이지는 http://rsef.net/Work/request.php(소스는 http://rsef.net/Work/request.phps)입니다.
request() 함수도 많이 보신 형태입니다.
다만 REQ.setRequestHeader에서 Content-Type을 text/xml로 지정하는 부분이라던가,
성공했을때 false, 실패했을때 true를 return해주는 정도가 흔히 보는 형태와 다를겁니다.
일단 Content-Type을 text/xml로 지정해주면 위의 xhtml.php 설명에서 생략한 $_SERVER['CONTENT_TYPE']에 text/xml이라는 값이 할당되게되며 따라서 xhtml.php의 Content-Type이 text/xml로 되게 됩니다.(일반적인 browser로 접속을 하게되면 값이 없으므로 skip됩니다.)
이렇게 text/xml로 되야 xml parser가 parsing을 할 수 있으니 반드시 필요한 작업이 되겠습니다.
그리고 성공했을때 false, 실패했을때 true를 return해주는 이유는 onclick event에서 실패했을 경우에 xhtml.php로 페이지 이동을 시킴으로써 원래 anchor(a) element의 동작을 보증해주기 위해서입니다.(장담은 못하겠지만;; 이 경우 검색엔진도 실제 contents인 xhtml.php의 접근이 가능할 것입니다.)
위의 예제를 보시면 아시겠지만 크게 신경쓸 것 없이도 상당한 웹 접근성을 확보하는 일이 가능합니다.
물론 실제 작업 중, 특히 동적인(server side) 페이지같은 경우에는 이런저런 문제(대부분은
validate를 통과하지 못하는 문제)가 생길 수도 있습니다.
하지만 XHTML만 validate를 보장해준다면 얻을 수 있는 많은 이점이 있기 때문에 결코 손해보는 일은 아닐 것입니다. :)
ps. 위의 예제는 서버 설정에 따라 약간 수정을 해주어야 할 수도 있습니다.
비동기의 자바스크립트와 XML이죠.
근데 AJAX로 작업을 해보신 분이라면 아시겠지만 어떤 기능을 AJAX로 구현하게되면 그 기능만을 위한 별도의 XML 페이지를 작업 해야된다는 것을 잘 아실겁니다.
하지만 이렇게 별도의 XML페이지를 제작하게 된다면 당연히 제작/유지/보수에 2배에 가까운 노력이 들게 됩니다.
물론 웹 접근성을 고려해서(이 경우에는 보통 javascript가 disable된 상황) 일반 HTML페이지도 제작한다는 전제하이기는 합니다.
(사실 아쉽지만 대부분의 AJAX로 제작된 사이트들이 이 것을 무시하고 있습니다. 뭐 이런 문제가 있다는 것조차 모르시는 분들이 더 많다는게 문제이기는 합니다만..)
위에서도 말했듯이 2배에 가까운 노력이 드는데도 불구하고(?) 사실 그런 환경으로 웹서핑을 하는 경우가 거의 없기 때문에 얻을 수 있는 효과는 미미합니다. 그렇기 때문에 무시되는 경우가 많죠.
하지만 XML대신 XHTML을 사용한다면 이야기는 조금 달라집니다.
역시나 아시겠지만 XHTML은 XML parser에 의해 parsing이 됩니다.
따라서 애초에 처리되는 페이지를 XHTML로 가능한한 semantic하게 제작을 해두면 큰 노력없이도 AJAX와 웹접근성이라는 두마리 토끼를 다 잡을 수 있습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Virtual Library</title>
</head>
<body>
<p>Moved to <a href="http://example.org/">example.org</a>.</p>
</body>
</html>
위의 예제는 W3C의 XHTML1.0 문서에 있는 내용입니다.<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Virtual Library</title>
</head>
<body>
<p>Moved to <a href="http://example.org/">example.org</a>.</p>
</body>
</html>
위의 예제를 실제 작업할 내용으로 변경해보겠습니다.
예제 페이지는 http://rsef.net/Work/xhtml.php(소스는 http://rsef.net/Work/xhtml.phps)입니다.
<?php
if($_SERVER['CONTENT_TYPE']) header('Content-Type: '.$_SERVER['CONTENT_TYPE']);
header("Cache-Control: no-cache, must-revalidate");
echo '<?xml version="1.0" encoding="UTF-8"?>';
?>
... 하략(노란색박스의 내용과 동일)
맨 위에 header의 Content-Type이 있을 경우 그 Content-Type으로 선언한 것이 보일겁니다. 이 것은 아래의 request.php에서 설명하도록 하고 넘어갑니다.if($_SERVER['CONTENT_TYPE']) header('Content-Type: '.$_SERVER['CONTENT_TYPE']);
header("Cache-Control: no-cache, must-revalidate");
echo '<?xml version="1.0" encoding="UTF-8"?>';
?>
... 하략(노란색박스의 내용과 동일)
그 아래 no-cache설정은 실제 작업을 할때는 특별히 고려할 필요는 없겠지만(IE의 경우 xhtml.php와 request.php를 no-cache설정 없이 한개의 window로 볼 경우 문제가 되지만 실제 사용시 그런 경우는 없겠죠.) 이 경우는 예제이다보니 넣겠습니다.
그리고 제가 사용하고 있는 서버는 php의 short_open_tag 설정이 on으로 되어있기 때문에 XML선언부를 echo '<?xml version="1.0" encoding="UTF-8"?>';로 썼습니다.
그럼 이 페이지를 javascript로 요청하는 페이지를 만들어 보겠습니다.
예제 페이지는 http://rsef.net/Work/request.php(소스는 http://rsef.net/Work/request.phps)입니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Virtual Library Request</title>
<script type="text/javascript">
//<![CDATA[
function newXMLHttpRequest() {
... 중략 ...
}
function request(href) {
try {
var REQ = newXMLHttpRequest();
REQ.onreadystatechange = function() {
if(REQ.readyState == 4) {
if(REQ.status == 200) {
var body = REQ.responseXML.getElementsByTagName("p")[0];
alert(body.firstChild.nodeValue);
}
}
};
REQ.open("GET", href, true);
REQ.setRequestHeader("Content-Type", "text/xml");
REQ.send(null);
return false;
} catch(e) {
return true;
}
}
//]]>
</script>
</head>
<body>
<a href="./xhtml.php" onclick="return request(this.href);">Click!</a>
</body>
</html>
newXMLHttpRequest() 함수야 많이 보셨을테니 생략하고..<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Virtual Library Request</title>
<script type="text/javascript">
//<![CDATA[
function newXMLHttpRequest() {
... 중략 ...
}
function request(href) {
try {
var REQ = newXMLHttpRequest();
REQ.onreadystatechange = function() {
if(REQ.readyState == 4) {
if(REQ.status == 200) {
var body = REQ.responseXML.getElementsByTagName("p")[0];
alert(body.firstChild.nodeValue);
}
}
};
REQ.open("GET", href, true);
REQ.setRequestHeader("Content-Type", "text/xml");
REQ.send(null);
return false;
} catch(e) {
return true;
}
}
//]]>
</script>
</head>
<body>
<a href="./xhtml.php" onclick="return request(this.href);">Click!</a>
</body>
</html>
request() 함수도 많이 보신 형태입니다.
다만 REQ.setRequestHeader에서 Content-Type을 text/xml로 지정하는 부분이라던가,
성공했을때 false, 실패했을때 true를 return해주는 정도가 흔히 보는 형태와 다를겁니다.
일단 Content-Type을 text/xml로 지정해주면 위의 xhtml.php 설명에서 생략한 $_SERVER['CONTENT_TYPE']에 text/xml이라는 값이 할당되게되며 따라서 xhtml.php의 Content-Type이 text/xml로 되게 됩니다.(일반적인 browser로 접속을 하게되면 값이 없으므로 skip됩니다.)
이렇게 text/xml로 되야 xml parser가 parsing을 할 수 있으니 반드시 필요한 작업이 되겠습니다.
그리고 성공했을때 false, 실패했을때 true를 return해주는 이유는 onclick event에서 실패했을 경우에 xhtml.php로 페이지 이동을 시킴으로써 원래 anchor(a) element의 동작을 보증해주기 위해서입니다.(장담은 못하겠지만;; 이 경우 검색엔진도 실제 contents인 xhtml.php의 접근이 가능할 것입니다.)
위의 예제를 보시면 아시겠지만 크게 신경쓸 것 없이도 상당한 웹 접근성을 확보하는 일이 가능합니다.
물론 실제 작업 중, 특히 동적인(server side) 페이지같은 경우에는 이런저런 문제(대부분은
validate를 통과하지 못하는 문제)가 생길 수도 있습니다.
하지만 XHTML만 validate를 보장해준다면 얻을 수 있는 많은 이점이 있기 때문에 결코 손해보는 일은 아닐 것입니다. :)
ps. 위의 예제는 서버 설정에 따라 약간 수정을 해주어야 할 수도 있습니다.
Trackback Address :: http://blog.rsef.net/trackback/38
