트위터 공식 위젯 IE 오류 때려잡기

현재(~2010-11-08) 트위터에서 공식 제공중인 트위터 위젯의 코드를 받아다가
자신의 사이트에 삽입하고 돌려보면
다른 브라우저에서는 아무런 문제가 없는데 유독 IE 에서 오류가 발생합니다.
하여 구글링을 통해 이곳에서 해결책을 찾고
그대로 적용시켜 보았습니다. 아래는 그 글의 해결책 제 나름대로의 번역입니다.

파이어폭스에서는 제대로 동작하는데 인터넷 익스플로러 8에서는 그렇지 않다.

문제는 다음의 JS 파일에 있다: http://widgets.twimg.com/j/2/widget.js

해법

1. 그들의 JS 파일 http://widgets.twimg.com/j/2/widget.js 다운로드.
   (제 경우는 윈도우용 wget 을 썼습니다.)
   
2. 편집기에서 Array.forEach 를 찾아서 Array.prototype.forEach 로 수정.
3. 저장하고 당신의 웹프로그램 폴더의 알맞은곳에 올린다.
4. 트위터에서 받았던 위젯삽입 코드 중 script src="로컬경로/widjet.js" 로 고쳐준다.

이렇게 하고 돌려보니 와우~! 오류가 계속 나더군요.
제가 받은 오류는 '/' 문자가 문제다... 뭐 그런것이었습니다.

이후의 해결법은 구글링을 통해서는 찾지를 못하고
별의 별 방법들을 widget.js 소스를 고쳐보며 시도해 보았으나 오류만을 리턴받아야 했습니다.

다음날 아침, 누가 이기나 보자는 마음으로 다시 저 문제를 거들떠보며
더욱 오류나는곳의 소스를 IE8의 개발자도구(F12)에서 살펴보니
어제 받았던 / 문자 앞의 문자가 깨져 있는 것이 보였고
아래 소스와 같이 SCRIPT src="/js/twitter_widget.js" charset="utf-8"로 수정하여 해결했습니다.

[script type="text/javascript" src="/js/twitter_widget.js" charset="utf-8"][/script]
[script type="text/javascript"]
// 트위터 검색 위젯 https://twitter.com/goodies/widget_search
// src=http://widgets.twimg.com/j/2/widget.js
if(typeof TWTR != 'undefined') new TWTR.Widget({
  version: 2,
  type: 'search',
  search: '{검색어}',
  interval: 6000,
  title: '{제목}',
  subject: '{큰제목}',
  footer: '{위젯 아웃링크}',
  width: 250,
  height: 300,
  theme: {
    shell: {
      background: '#8ec1da',
      color: '#ffffff'
    },
    tweets: {
      background: '#ffffff',
      color: '#444444',
      links: '#1985b5'
    }
  },
  features: {
    scrollbar: false,
    loop: true,
    live: true,
    hashtags: true,
    timestamp: true,
    avatars: true,
    toptweets: true,
    behavior: 'default'
  }
}).render().start();
[/script]

(위 소스를 복사하여 쓰실때 [/script] 의 [ ] 문자는 < > 로 수정하여 쓰시기 바랍니다.)

제가 운영하는 서버의 문자셋은 euc-kr 이었고
제가 저장해서 수정한 twitter_widjet.js 의 문자셋은 utf-8 으로
문자셋에서 문제가 발생했던 것이었습니다.

구글링을 했어도 해결책을 찾지 못했던 이유가
그들은 UTF-8 아닌것에서도 오류가 없었기 때문이었죠.

이렇게 하고 스크립트 로딩 속도를 위해 온라인 javascript packer 로 압축해서 올려봤더니 오류가 발생해서 그냥 쓰고 있습니다. 아래에 제가 수정한 widjet.js를 올립니다.

twitter_widget.ZIP