티스토리 뷰

Programming Tips/Web Programming

[HTML5] 익스플로러 IE(Internet explorer)에서 구글 크롬 프레임으로 HTML5 이용하기

Unikys 2012. 12. 7. 10:03


* HTML5를 개발하는데 있어서 가장 큰 걸림돌이라하면 바로 인터넷 익스플로러(IE)일 것이다. MS에서는 웹표준과는 동떨어진 독자노선을 걷다가 이제 웹표준이 정립되어가고 있는 HTML5의 적용을 브라우져에 이제서야 뒤늦게 시작하고 있다. IE10에서는 그래서 그나마 호환성을 갖추기는 했지만 여전히 부족한 느낌이 많을 것이다. 이러한 문제를 해결하기 위한 한가지 방법은 바로 구글의 크롬 프레임(Chrome Frame)이다.


* 구글 크롬 프레임(Google Chrome Frame: GCF)

: 구글 크롬 프레임은 IE에서 구글 크롬의 환경을 구현할 수 있도록 도와주는 오픈소스 플러그인이다. 구글의 V8 자바스크립트 엔진과 다양한 웹기술들을 최신 경향의 적용이 느린 IE에 적용시켜줄 수 있는 유용한 도구이다. 이것을 통해 무엇보다도

    • canvas나 WebRTC와 같은 다양한 HTML5 태그들을 이용할 수 있고
    • 자바스크립트의 성능이 월등히 좋은 구글의 자바스크립트 엔진 V8을 이용할 수있게 된다.

: HTML5와 자바스크립트 개발자라면 이것이 얼마나 유용할 것인지 알수 있을 것이다. 하지만 그 사용법을 보면 더욱더 놀라 자빠질것이다.


* 구글 크롬 프레임 웹페이지에 적용하기

: 일단 적용하고자하는 html 웹페이지를 열어서 페이지의 위 <head> 근처 다른 <meta> 태그들과 함께 다음을 넣어주자.

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=IE9">

끝.


: 정말로 끝이다. 이러면 적용은 끝난것이다. 이것을 보자마자 도대체 구글은 어떻게 되먹은 놈들인가 생각이 든다. 하지만 문제는 사용자가 구글 크롬프레임이 깔려있다면 끝난것이지만, 안깔려있다면 아무현상도 일어나지 않는다. 위의 경우 chrome=IE9는 IE9 버전 이하에서 작동을 하겠다는 것이고, chrome=1 이면 어느 버전에서든지 무조건 작동을 하게 된다. IE=Edge는 IE의 렌더링 행동을 따라가는 것을 의미하고, IE=Edge,chrome=IE9의 순서를 지켜야한다.


: 만약 사용자가 구글 크롬프레임이 설치되지 않은 경우 설치여부를 확인하고 설치를 권유해야할 것이다. 그것 또한 방법을 제공해주고 있는데, 아래와 같이 구현하도록 하면 된다.

<!--[if IE]>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
	<script>
		window.attachEvent("onload", function() {
			CFInstall.check({
				mode: "overlay"
			});
		});
	</script>
<![endif]-->


: 이렇게 구현하면 만약 사용자가 구글 크롬 프레임이 깔려있지 않다면 구글 크롬 프레임을 깔라는 다이얼로그가 나올 것이다. 이러한 설치 방식은 다양한데, overlay는 페이지를 먹통으로 만들고 반드시 설치를 요구할 때에 이용하는 것이고, inline으로 설정한다면 페이지 내에 iframe을 추가하게 되고 그 안에서 설치를 하는 url을 띄워줄 것이다. 위의 check함수가 받는 인자들을 다음과 같다.


 인자 이름

설명 

 mode

 GCF가 설치 안되었을 때 설치를 하는 방법

  • inline: 기본값, iframe을 생성해서 설치 url을 띄운다, node가 설정되어있으면 node의 element에 iframe을 생성하고 설정 안되어있으면, body의 첫번째 element로 추가한다.

  • overlay: 추천, page위에 다이얼로그를 띄워서 페이지가 작동되는 것을 멈추고 설치를 권하게 된다.

  • popup: 팝업을 띄워서 설치를 권한다. 만약 popup을 사용한다면, CFInstall.check()를 onclick 같은사용자의 이벤트로부터 호출되도록 하는 것이 좋다. 왜냐하면 팝업 차단기들은 바로 popup을 바로 차단할 것이기 때문이다.

 url

 기본값: "http://google.com/chromeframe", 만약 인트라넷이나 폐쇄환경이라서 설치를 다른 url로 해야할때 설정하면 된다. 

 destination

 CFInstall.check를 하고 만약 설치가 되어있다면 여기에 설정된 url로 자동으로 이동하게 된다.

 node

 위의 mode가 inline인 경우 iframe을 생성할 element의 id

 onmissing

  GCF가 없다면 호출될 함수

 preventPrompt

 기본값: false, onmissing을 통해 자체 프롬프트를 제공하고자 한다면 true로 기본 프롬프트를 막으면 된다.

 oninstall

  GCF가 설치되고 나서 호출될 함수

 preventInstallDetection

 기본값: false, GCF가 인스톨되었는지 여부를 체크하지 않을 때 true로 설정. 설치를 요구하는 절차를 생략하고자할 때 true로 설정하면 된다. 액티브X와 비슷하게 생각하고 거부하는 사용자들을 위한 옵션이다.

 cssText

 mode가 inline일 때 iframe에 설정할 css

 className

 mode가 inline일 때 iframe에 설정할 스타일 class



* IE에서 HTML5 사용!

: 만약에 IE에 구글 크롬 프레임이 설치되어있지 않다면 아래와 같이 설치를 하라고 알려준다.



: 그리고 IE에서 다양한 HTML5의 기능들을 구현하면 된다. 이제 IE에서도 WebRTC가 된다! 




* 더 자세한 내용을 공부하고 싶다면 아래의 사이트를 참고하면 될 것이다.

http://www.chromium.org/developers/how-tos/chrome-frame-getting-started


끝.

저작자표시 비영리 동일조건
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
글 보관함