2014. 6. 12. 17:08ㆍ프로그래밍/Javascript & JQuery
Canvas를 사용하여 그래프를 출력해야하는데 , 아래와 같이 브라우저에서 에러가 나는 경우가 있다.
나같은 경우 Chrome, IE 10 호환성보기, IE 9에서는 잘 되었고, IE10 호환성보기를 아래의 에러가 발생하였다.
개체가 'getcontext' 속성이나 메서드를 지원하지 않습니다.
Object doesn't support property of method 'getContext'
이거 잡느라 3시간넘게 삽질을... ㅠ_ㅠ;;
어쨌든, 해결책은 코드 몇줄을 삽입해주면 해결된다.
1. <head> 내에 아래 코드 삽입
<!--[if IE]><script src="js/excanvas.js"></script><![endif] -->
excanvas.js 는 개별적으로 다운로드하여 해당경로에 넣어준다.
->> https://code.google.com/p/explorercanvas/downloads/list
2. <script> 내에 아래 코드 삽입
if (typeof G_vmlCanvasManager != 'undefined') {
canvas = G_vmlCanvasManager.initElement(canvas);
}
- G_vmCanvasManager 는 excanvas.js에 선언되어있다.
// Create a dummy element so that IE will allow canvas elements to be
// recognized.
해석을 해보면 IE가 캔버스를 인식할수 있도록 더미 요소를 생성해줌.
즉, IE 가 캔버스를 인식할수 있도록 초기화를 해준다는 말이다.
- if (typeof G_vmlCanvasManager != 'undefined') {..} 을 해준 이유는
1번에서 선언한 부분이 IE 버전에서만 사용된다. 때문에 그외 브라우저에서는 G_vmlCanvasManager를 인식 할 수 없기 때문에 G_vmlCanvasManager 를 찾을 수 없다는 등의 에러메시지가 나오기 때문이다.
위의 2가지를 한 후 돌려보면 IE 나 FF, Chrome 에서도 Canvas가 제대로 동작할 것이다.
'프로그래밍 > Javascript & JQuery' 카테고리의 다른 글
| [Javascript] iframe 내부 function 접근하기 (0) | 2014.07.07 |
|---|---|
| [jQuery] jQuery DOM window (레이어 팝업) (0) | 2014.06.13 |
| [Javascript] 팝업창에서 부모 frame 접근 (0) | 2014.05.08 |
| [Javascript] input 에 숫자만 입력받기 (0) | 2014.04.18 |
| [jQuery] jQuery readyOnly disabled 속성 주기 (0) | 2014.04.14 |