따라쟁이

IE에서 window.open(url)로 열리는 팝업의 경우 GET 요청 헤더에 referer 정보를 포함하지 않습니다. Referer를 체크해서 뭔가를 하는 경우(제가 일하는 곳에서는 주로 방문 집계등과 같은 통계 정보를 추출하기 위해 사용합니다)에 문제가 됩니다.

일반적으로 팝업창을 여는 코드는 다음과 같습니다.

<a href="http://www.daum.net/" onclick="window.open(this.href, 'popup','width=800,height=400').focus();return false;">Open Popup window</a>

위의 코드를 IE에서 실행한 후 Fiddler 등으로 확인해 보면 referer 정보가 없다는 것을 확인할 수 있습니다. 다른 브라우저에서는 referer가 존재합니다(사실 정확히는 모르겠지만 IE에서만 그렇다는…). 그래서 이 코드를 다음과 같시 수정했더니 referer가 포함되네요.

<a href="http://www.daum.net/" target="popup" onclick="window.open('', 'popup','width=800,height=400').focus();">Open Popup window</a>

원리는 onclick 이벤트 시 url을 명시하지 않고 창을 연 다음, 링크의 타겟을 해당 창 이름으로 설정하는 방식입니다. 주의할 점은 onclick 이벤트에서 return false;를 하지 않도록 해서 기본 동작(링크 이동)을 수행한다는 점입니다.

약간 걱정되는 것은 혹시 window.open()의 동작과 페이지 열기가 비동기적으로 동작해서(페이지 열기 후 window.open()이 실행되는?) 팝업창의 속성이 제대로 안먹히면 어쩌나 하는 걱정이. ^^;

2008. 5. 7
본 포스트는 전반적으로 잘못 이해된 사항을 기반으로 작성되었습니다. 제목에서 IE에서의 오류라고 되어 있는데, 오류인지는 잘 모르겠지만 일단 모든(IE, FF, Safari)에서 동일하게 동작합니다. 제 생각에는 정상적인 동작이라고는 생각되지 않습니다. 브라우저는 response type이 text/css인 경우에만 css로 해석해야 올바르지 않을까요? 그리고 redirect시에만 발생하는 것처럼 글 이 작성되었는데 redirect와 무관하게 발생합니다.

어쨌든 결론은 “존재하지 않는 css를 link로 참조하면 의도하지 않은 스타일이 적용될 수 있다” 입니다.

최근 스킨을 적용하기 위해 css를 dynamic하게 생성하도록 하는 페이지를 만들다 발견된 현상입니다.

IE에서 <link>로 요청된 css가 redirect된 경우 redirect된 resource가 css(mime type이 text/css)가 아닌 경우에도 해당 resource를 해석하여 css로 처리하는 현상이 있는 것으로 보입니다.

Daum 사이트에서는 파일이 존재하지 않는 경우 http://status.daum.net/error/error404.html 로 redirect 되는데, 다음 코드와 같이 존재하지 않는 css 파일을 요청할 경우 위에서 언급한 문제가 발생합니다.

[source:html]

[/source]

http://status.daum.net/error/error404.html 페이지의 코드를 보면 style이 페이지에 포함되어 있는데, 위 코드에서 div의 id로 지정한 #B_C selector 가 존재합니다. 따라서 위 페이지를 Internet Explorer에서 볼 경우 color와 font-size가 error404.html에서 정의한데로 출력되는 것을 볼 수 있습니다.

[source:html]

[/source]

위 코드는 error404.html에 포함된 #B_C selector 관련 스타일이며, 다음 그림은 ie7에서 위 html 페이지의 출력 결과입니다.

의문사항

• redirect된 대상이 html인 경우에만 발생하는지?
• html인 경우에만 발생한다면, redirect된 html에서 또 다른 스타일시트를 link로 참조한 경우에는 어떻게 될것인지?

현재 개발중인 IE의 차기버전인 IE8에서는 Acid2 테스트를 통과한다고 합니다. 저를 비롯한 UI개발자들에게는 정말로 반가운 소식이 아닐 수 없습니다. IE8이 출시되면 IE7 처럼 업데이트 미루지 말고 모조리 강제 업데이트되도록 하면 좋겠네요.

tv팟은 IE8를 비롯한 웹표준을 준수하는 모든 브라우저에서 제대로 렌더링 되고 있으니 걱정 없습니다. ㅋㅋㅋ IE6에서만 잘 돌아가는 사이트들은 나몰라~~~ 미리 미리 대비 하시길~~~