Mozilla 한국 커뮤니티

결국 iframe으로 가기로 가닥을 잡고 일반사용자들은 못느끼도록 scrollheight등으로 조절을 해주는데..

여기서도 문제가 발생했어요.

불여우에서는 scrollHeight이 아주아주 잘 통해서 스크롤이 필요가 없어졌는데.. 익스에서는 scrollHeight이 0이 리턴되는 문제가 발생하네요.

innerHTML로 내용을 적어주고, scrollHeight으로 내부의 사이즈를 구하는데 불여우에서는 적정한 숫자들이 잘 나오는데 익스에서는 0이 리턴되구요.

버그를 잡는 과정에서 alert();의 위치에 따라 scrollHeight이 잘 먹히는 경우가 있고 안먹히는 경우가 있네요.

불여우 DOM하고 자바스크립트 콘솔을 이용해개발을 하다보니 이제는 불여우에서만 돌아가는 스크립트를 짜게되는거 같아요 ㅠ_ㅠ;;

결국 scrollHeight이 0으로 리턴되는 경우는 950을 기본 높이로 주고, 스크롤바를 auto로 맞춰주는 방식으로 대애충 해결을 했습니다.

역시나 자바스크립트는 어렵네요....

loveisfunny wrote: 역시나 자바스크립트는 어렵네요....

네, 정말 자바스크립트는 어려워요. :)

자바스크립트가 어려운 이유는
국내에서 처음부터 가르쳐주는 사이트가 없다시피하고, 복사해서 쓰는 거라는 개념을 박아준 덕도 크다고 생각합니다.

외국어 해독이 된다면야 그쪽에서 기초부터 배우는 게 훨씬 나은데, 그게 귀찮거나 안되는 사람은 이미 있는 코드 가져와서 대충 뜯어 고쳐 쓰거나 하니 결국 기초가 부실한 상태에서 어찌 돌아가는 코드가 양산되는 악순환의 반복이 되어왔다 싶더군요.

ajax 니 ria 니 해서 클라이언트 스크립트에 대한 관심이 일시 고조되긴 했지만, 결국 자바스크립트에 대해서 기초부터 쌓기는 국내 자료는 부족할 수 밖에 없을 듯 합니다. 자바스크립트 객체지향 같은 것도 외국에서 처음 보았었고 국내엔 복사해쓰는 자바스크립트 라는 사이트들이 유난히 유행하더군요..

저도 옛날 처음 배울 때 dom 의 트리 구조를 당췌 알 수가 없어서 한참 헤맸던 적이 수두룩합니다. 외국 자료 뒤지면 나오는데 그럴 각오가 부족했기도 하고, 그냥 덤벼들어서 뜯어고치는 식으로 해왔기 때문에..

여튼간에 msdn 이든 다른 외국 자료든 간에... 튜토리얼 사이트에서 처음부터 배워보시는 것도 앞으로 도움이 될 듯 합니다(var 선언부터 해서 변수의 정의, 배열의 기초, dom 트리의 구조...)

저도 한동안 고민을 많이 했었던 문제입니다.

scrollHeight 가 0 을 리턴하는 경우는 DOCTYPE을 선언한 경우 발생을 하더라구요.

DOCTYPE을 빼면 정상적인 값을 리턴하고, 넣으면 0을 리턴하고 아주 환장하겠더군요.

일반적으로 사용하는 스크립트 코드는 이렇습니다.

DOCTYPE을 선언한 경우에는 이렇게 사용하면 정상적인 값을 리턴합니다.

documentElement 의 값들은 찍어보다보니 태그가 HTML 이더군요.

처음 막혔던 부분이 DOCTYPE 설정 후 테이블에 height=100% 이게 안되던 문제였었는데,
CSS에서 html,body { height:100%; } 이렇게 해서 해결을 했었거든요.

언듯 스치는 생각으로 관련이 있는 부분이 아닐까 합니다.

그래서, 관련 DOM 뒤지면서 찾다가 해결한 부분이었는데... 다른 분들은 간혹 이렇게 해서도 해결을 못하시는 분들이 있더군요...

전체소스를 보지 못해서 어떻다고 단정지을수는 없지만, 제가 겪어본 바로는 해결이 가능한 부분으로 생각하고 있습니다.

잘 해결하셨으면 하네요.

지기지 wrote:
DOCTYPE을 선언한 경우에는

Code: Select all

document.documentElement.scrollTop

이렇게 사용하면 정상적인 값을 리턴합니다.

documentElement 의 값들은 찍어보다보니 태그가 HTML 이더군요.

처음 막혔던 부분이 DOCTYPE 설정 후 테이블에 height=100% 이게 안되던 문제였었는데,
CSS에서 html,body { height:100%; } 이렇게 해서 해결을 했었거든요.

언듯 스치는 생각으로 관련이 있는 부분이 아닐까 합니다.

그래서, 관련 DOM 뒤지면서 찾다가 해결한 부분이었는데... 다른 분들은 간혹 이렇게 해서도 해결을 못하시는 분들이 있더군요...

전체소스를 보지 못해서 어떻다고 단정지을수는 없지만, 제가 겪어본 바로는 해결이 가능한 부분으로 생각하고 있습니다.

잘 해결하셨으면 하네요.

더 자세한 내용을 알고 싶습니다. doctype이라는 것이 어떤것인지 잘 모르거든요.. <! doctype 이런 것을 말씀하시는 건가요?

또 doctype이 iframe내부에 선언되었을 때인지, 바깥 문서에 선언되었을 때인지도 알고 싶습니다. 해결책이 보이는 것 같네요.^^

doctype이라는 것이 어떤것인지 잘 모르거든요.. <! doctype 이런 것을 말씀하시는 건가요?

네. 바로 그겁니다. <! doctype 입니다.
doctype에서 설정한 dtd 에 따라 html tag 사용에 주의가 필요합니다.
자세한 내용은 다른분의 글이나 w3c를 참고하시구요.. ^^);
제가 알고 있는 어설픈 지식으로는 자세한 설명을 드리기가 힘들군요.
문제는 doctype을 사용함으로 인해서 기존에 사용하던 스크립트, 태그가 제대로 동작하지 않는 문제가 발생합니다.(오히려 제대로 동작함으로 인해서 생기는 문제라는 표현이 맞겠군요.)

또 doctype이 iframe내부에 선언되었을 때인지, 바깥 문서에 선언되었을 때인지도 알고 싶습니다.

iframe을 어디서 제어하느냐에 따라 달라집니다.
scrollTop, scrollHeight... 등의 값을 처리하는 스크립트가 속해있는 파일의 doctype에 영향을 받는것으로 알고 있습니다.
하나는 doctype을 사용하고, 하나는 사용하지 않는 경우는 테스트를 해보지 않아서 정확한 답변을 드리기는 어렵군요.
document.documentElement.scrollHeight 값이 정상적으로 나오는 경우는 doctype이 정상적으로 설정이 된 경우이고, document.body.scrollHeight 로 값이 나온다면 doctype이 설정이 되어있지 않거나, 잘못 되어 있다고 보시면 됩니다.

이러저러한 이유로 한페이지에서 처리하기가 매우 어려운 경우에 iframe을 사용해서 해결을 하고, 이 때 iframe의 스크롤바를 없애고자 iframe내부의 문서의 전체 높이를 구해서, iframe의 높이를 조정해서 사용자가 iframe을 인식하지 못하도록 하는것이 목적인 경우에... 도움이 될까해서 사족을 답니다.(이유가 길군요 ^^)

iframe 내부의 문서 높이는 해당 문서가 로딩이 완료된 시점에서 체크하는 것이 나름대로 정확합니다.
iframe 문서의 onload 이벤트를 이용해서 처리를 했었구요, 약간의 딜레이가 필요해서 setTimeout을 사용했었던 기억이 있군요.
저의 경우에는 iframe 문서의 스크립트에서 처리를 했었는데, 부모문서에서도 처리가 가능할 것으로 생각됩니다.

예전에 소스가 도움이 될까 싶어 올립니다. objBody = document.body

이부분을 doctype 설정하에서는 document.documentElement 로 바꿔야 하고,
위 스크립트는 iframe 내부 문서에서 동작해야 합니다.

해결책을 찾으시길 바랍니다 ^^

익스의 innerHTML은 명백한 버그라 생각합니다.

innerHTML이후에 무언가 실행되면 무조건 정상동작하니까요.

그래서 생각한건, setTimeOut();을 이용한 것이었고, 대기 시간이 0.1밀리세컨드이건 1밀리세컨드이건 정상작동 하더군요.

다른 해결책 있으신분은 답글 달아주세요~

아이 프레임 안에서는 onload 시에 아래 함수를 실행하고요.
function growFrame() {
try {
setTimeout('parent.growFrame(document.getElementsByTagName("body")[0].scrollHeight)', 1);
}
catch (e) {
...
}
}

아이프레임을 가지고 있는 페이지에서 다음 함수를 선언해 놓았습니다.


function growFrame(newHeight) {
try {
document.getElementById("inputFrame").height = newHeight;
}
catch (e) {
...
}
}

이렇게 해서 안쪽 페이지가 나 크기가 이만하니까 창 좀 키워줘 하고 부모 문서에 요청을 하면 부모 문서가 아이프레임을 늘려주도록 했었지요.

그리고 element를 호출할 때 id값을 바로 적는게 아니라 document.getElement(s)By...() 시리즈 함수를 사용해서 했었지요. (document.getElement(s)By...() 함수가 사용하다 보면 굉장히 강력하더군요. 인자로 받는 부분이 문자로 되어 있으니 상황에 따라 이것저것 바꿔부를 수 있고요)

뭐 이것도 사실 좀 허접해 보이기는 하지만 위에 같이 하면 docType에도 별 문제없이 동작하지 않을까 생각해 봅니다.