hacking/web2007/09/27 11:48
크리에이티브 커먼즈 라이선스
Creative Commons License
DOMContentLoaded가 뭔지 모르신다면 신경끄셔도 무방한 아이템 되겠다.

그게 뭔지 아신다면... 그로 인한 고통도 자알 알고 계실터...
어처구니없는 해결책 하나 보시겠다:
(출처: http://javascript.nwbox.com/IEContentLoaded/ )
(function (){

//check IE's proprietary DOM members
if(!document.uniqueID && document.expando) return;

//you can create any tagName, even customTag like <document:ready />
var tempNode = document.createElement('document:ready');
try {
//see if it throws errors until after ondocumentready
tempNode.doScroll('left');

//call your function which catch window.onDocumentReady
alert('window.onDocumentReady()');

//relaese some memory, if possible
tempNode = null;

}catch (err){
setTimeout(arguments.callee, 0);
}

})();
해설을 덧붙이면: DOM이 완전히 로딩될때까지 계속 무대뽀로 DOM의 첫번째 노드를 scroll한다. DOM이 완전히 로드되기 전까지는 예외가 떨어지지만, DOM이 완전히 로드된 다음에는 (당연하게도)예외가 발생하지 않고 scoll된다(첫번째 노드가 align:right라면 OTL). 정말 개무식한 방법이지만... 유용하다. IE만쉐! 만쉐! lol
여기에 살을 약간 덧 붙이면 모든 브라우져를 위한 꽁수 완성:
(출처: http://webreflection.blogspot.com/2007/09/whats-wrong-with-new-iecontentloaded.html )
onReady = (function(ie){
var d = document;
return ie ? function(c){
var n = d.firstChild,
f = function(){
try{
c(n.doScroll('left'))
}catch(e){
setTimeout(f, 10)
}
}; f()
} :
/webkit|safari|khtml/i.test(navigator.userAgent) ? function(c){
var f = function(){
/loaded|complete/.test(d.readyState) ? c() : setTimeout(f, 10)
}; f()
} :
function(c){
d.addEventListener("DOMContentLoaded", c, false);
}
})(/*@cc_on 1@*/);

onReady(function(){

alert("Hello DOM");

});
애써 이해할려고 하지말고, 그냥 쓰셔도 무방하겠다. dojo의 addOnLoad를 이걸로 바꾸면 쓸만하겠다.
여기서도 세삼 느끼는 점은 IE KIN~


'hacking > web' 카테고리의 다른 글

prototype사용자를 위한 dojo 입문 (1)  (0) 2007/11/13
2007 Ajaxian.com Reader Survey 결과  (0) 2007/10/15
DOMContentLoaded revisited  (0) 2007/09/27
RIA 전성 시대? AJAX 독주 체제!  (2) 2007/09/22
dojo 1.0을 위한 grid 위젯은 TurboGrid  (0) 2007/09/17
SVG for All  (2) 2007/09/14
Posted by iolo
hacking/web2006/11/14 00:24
크리에이티브 커먼즈 라이선스
Creative Commons License
DWR을 사용해서(자바용 AJAX 라이브러리) 받아온 결과를 여러 개의 TR태그로 만들어서 미리 만들어져 있는 TBODY의 innerHTML에 밀어넣는 코드를 만들었었다. 작업은 주로 리눅스에서 했고 파이어폭스 1.5 / 2.0에서 잘 돌아갔다. QA팀의 테스트에 임박해서야 IE에서 처음으로 테스트 했는데.. 웬걸.. 완전 먹통인 것이다.

처음에는 DWR의 문제라고 생각했다. 일단 DWR이 만들어는 응답 메시지가 구질구질했기 때문이다. DWR을 걷어내야겠다고 맘만 먹고 일단 퇴근... 그러나... 좀 아깝긴 하다 -.-; DWR 같이 거져먹는(써본 사람들은 이 표현에 동의할 것이라고 확신한다) 라이브러리를 포기한다는 건 말처럼 쉬운 일이 아니다.

집에만 설치되어 있는 IE용 자바스크립트 디버거(MicrosoftScriptEditor)로 트레이스를 좀 해보기로 했다. DWR의 응답 메시지만 구질구질한게 아니다. 그 안쪽 로직은... 더욱 멋지다-.-;;;; 추적 불가능에 가깝다. 온 동네에 eval이라는 지뢰가 깔려있다. 대충 ?StepOver를 하다가 지뢰 밟기를 수십 번... 그렇게 범위를 좁혀 나간 다음, 마침내 ?StepInto라는 탐침봉으로 한 줄 한 줄 조심스럽게 찔러나갔다. 그리고... 범인은...

.

.

.

.

.

.

.

.

.

.

미안하다. 내가 그랬다. -.-;;;;

삽질이라는게 대개 그렇지만, 오늘의 삽질은 유난히 결론이 짧다:

IE에서... COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR 태그의 innerHTML 속성은 읽기 전용 이다.


(TABLE에만 적용되므로) 별로 쓸모는 없겠지만 임시 해결책은: 출처: http://www.ajaxian.com/archives/innerhtml-gotchas
  1. function tableInnerHTML(target, rowHTML) {
  2.     /* Removed - why delete them?!
  3.     while (target.rows.length > 0) {
  4.         target.deleteRow(0);
  5.     } */
  6.     var tempDiv = document.createElement(”div”);
  7.     document.body.appendChild(tempDiv);
  8.     tempDiv.innerHTML = ‘’ + rowHTML + ‘’;
  9.     var tt = document.getElementById(”tempTable”);
  10.     /* Copy temporary table’s rows to target */
  11.     for (var i = 0; i < tt.rows.length; i++) {
  12.         target.appendChild(tt.rows[i].cloneNode(true));
  13.     }
  14.     tt.parentNode.removeChild(tt);
  15. }

오늘의 교훈: 남들 잘 쓰는 라이브러리를 함부로 의심하지말고... 니나 잘해라-.-;

Posted by iolo
TAG Bug, DWR, IE, innerhtml
hacking/web2006/11/01 00:26
크리에이티브 커먼즈 라이선스
Creative Commons License
오늘 얘기는 [http]Zimbra의 블로그에서 퍼 온 몇 장의 그래프...

먼저 IE 6 vs IE 7 vs FF 1.5. 그림 아래의 세부항목을 볼 수 없어서 아쉽지만... 요는 막대기가 짧은 놈이 장땡이고, 고로 FF 1.5가 장땡이다:

IEvsFF.jpg

다음은, IE 7 vs FF 2.0. 역시 그림 아래의 세부항목의 의미는 모르겠지만... 역시 막대기가 짧은 놈이 장땡이고, 고로 FF 2.0이 장땡이다:

IE7vsFF2.jpg

계속 해서, IE 7의 월별 성능 변천사. 10/15~17일 사이에 무슨 일이 있었던 걸까? 아무튼 격차가 상당히 좁혀졌다:

IE7trend.jpg

마지막으로, FF 1.5 vs FF 2.0. 흠... FF 1.5와 IE 7은 차이가 거의 없을 것이라는 것을 유추할 수 있겠다:

FF15vsFF2.jpg

헤비한 ?JavaScript 코딩을 해본 사람들은 알겠지만, IE 6는 거의 절망적이다. 앞으로 더욱 헤비한 ?JavaScript 코딩을 해야하는 입장에서 위의 그래프들은 상당한 위안이 된다. IE의 예측불가능한 동작들이 많이 수정되었기를 기대하면서, 다른 한편으로는 그렇게 수정된 내용들이 IE에 대한 예외적인 처리가 역효과를 내지 않을지 걱정이 된다.

IE 7 강제 업데이트가 임박했다. 딴 얘기지만, ?Y2K보다 더 심각한 상황을 초래할지도 모른다는 건 나만의 망상?

'hacking > web' 카테고리의 다른 글

slideshare.net  (0) 2006/11/07
Google has accquired JotSpot  (0) 2006/11/03
IE6 vs IE7 vs FF1.5 vs FF2  (0) 2006/11/01
모니블로그, 10분만 하면 감자만큼 한다~  (0) 2006/10/29
HTML 테이블 헤더빼고 스크롤하기  (0) 2006/09/25
IE의 필요없는 수직 스크롤바 없애기  (0) 2006/09/20
Posted by iolo
hacking/web2006/09/20 22:42
크리에이티브 커먼즈 라이선스
Creative Commons License
IE는 스크롤할 필요가 없어도 수직 스크롤바는 disable된 상태로 표시된다.

이걸 없애려면:
<style>
html, body { overflow:hidden; }
</style>

해주시면 되겠다.

부작용은... 스크롤할 내용이 있어도 스크롤바가 안나온다는 거다. -.-;

이걸 어따 써먹냐고? (새로 바뀐 야후 메일처럼) 화면 크기에 딱 맞게 디자인된 어플리케이션이나, iframe을 사용해서 두 개의 스크롤바가 밉상인 경우엔 나름대로 유용하더라.

Posted by iolo
TAG CSS, HTML, IE