크로스 브라우징 관련하여 주의해야하는 부분

IE기준으로 많은 웹페이지들이 개발되고 있지만 본질적으로 웹개발은 웹표준을 준수하여 이를 따르는 여러 브라우저에서 동일하게 출력이 되도록 하는 것이 옳다.

이를 위해서 웹개발시 주의해야하는 부분들에 대해 살펴보자.

1. IE전용 함수 혹은 각 브라우저용 전용 함수의 사용을 자제한다.
2. 
   
   • 먼저 아래의 소스를 보자. 
     1. <script language="javascript">
        1. function window::onLoad() { 
           1. 함수 구현
        2. }
     2. </script>
   •  위의 경우 IE에서는 페이지 로딩시 onLoad()에 속한 부분이 올바르게 실행되지만 FF(파이어 폭스)와 같은 타 브라우저에서는 실행이 되지 않는다.
     이는 해당 함수가 IE전용 함수이기 때문이다 이러한 함수들은 굳이 onLoad와 같은 IE전용함수로 만들지 않고 구현될 부분을 실행영역 하단에 위치 시키는 것이 좋다.
     1. <div id="insertArea"></div>
     2. <script language="javascript"> 
        1. document.getElementById("insertArea").innerHTML = "구현된 출력부분";
     3. </script>

   • 또 다른 방법으로 window:onLoad()가 아닌 window.onload = function() 을 쓰는 것이다. 

     1. <script language="javascript">

     2. window.onload= function() {

        1. 함수 구현
     3. }
     4. </script>
   •  스크립트 실행 전에 실행영역을 지정해야 오류가 나지 않는다는 것을 명심해야한다. (브라우저에서 출력할 source를 line by로 읽어들여 실행하기 때문이다.)
3.  W3C의 규약을 지키는 속성들을 사용한다.
   • 각 브라우저마다 특화된 무수히 많은 메소드와 속성이 있겠지만 W3C에서 규약한 메소드와 속성을 따르는 것이 좋다. 이는 브라우저들은 기본적으로 W3C에서 규약한 웹표준을 표현하려고 하기 때문이다.
     이에 대해서 정리한 사이트가 있다. (http://www.w3schools.com/)
     하지만 W3C의 규약을 지킨다 하더라도 각 브라우저마다 이를 실행하는 것은 차이가 존재할 수 있다. 예를 들어 아래와 같은 HTML DOM Style Object를 보자.
     1. <div id="outputArea"></div>
     2. <script language="javascript> 
        1. document.getElementById("outputArea").style.marginLeft = "30";
     3. </script>
   • 위의 경우 IE에서는 제대로 처리가 되지만 FF에서는 올바른 처리가 되지 않는다.
     이는 FF에서는 단위 명시가 불분명한 경우 오류 처리로 무시해버리기 때문이다 따라서 위의 경우는 아래와 같이 단위도 명시해주는 것이 좋다. 
     1. <div id="outputArea"></div>
     2. <script language="javascript"> 
        1. document.getElementById("OutputArea").style.marginLeft = "30px";
     3. </script>
   • [여백]
4. 전역변수를 사용할 경우 꼭 변수선언을 해준다.
   • IE에서는 전역변수의 경우 var를 지정해주지 않으면 전역변수로 인식을 하지 않는다.
   • FF에서는 전역변수를 지정하지 않더라도 function외부에서 변수가 사용이 되면 전역변수가 된다.
5. ajax를 사용시 xml에서 정보를 불러들이는 경우 차이가 있다.
   
   • IE의 경우 불러온 값을 호출을 할때 순차적으로 불러온 노드의 값을 각 item의 text로 불러들여진다. FF의 경우 text 속성이 없으며 불러들여진 nodeList의 값이 IE와 다르다.
   • IE의 경우
     • #루트노드
       노드네임
       ...
       노드네임
   • FF의 경우
     • #루트노드
       노드네임
       #자식노드
       노드네임
       #자식노드
       노드네임
       ...
       #자식노드
       노드네임
   • 위와 같이 순차적으로 불러들여지는 값이 차이가 생긴다. 어쩔수 없이 구분을 지어서 사용해야 하는 실정이다. 
     • 이에 대하여 설명을 한 곳이 있다. (http://www.w3schools.com/dom/prop_node_nodename.asp)
     • 위의 사이트에서 예시한 소스를 IE와 FF에서 호출해보면 흥미로운 결과를 알 수 있다.(http://www.w3schools.com/dom/tryit.asp?filename=try_dom_nodetype)
     • IE에서는 자체적으로 각 노드의 nodeType 이 1(Element)인 값만 List에서 호출하지만 FF에서는 nodeType이 3(Text)인 값까지 불러들이는 것이다.
   •  text 속성은 IE전용 속성이며 W3C규약이 아니다. 따라서 사용하지 않는 것이 좋다.  (현 상황에선 별수 없을듯..)
     1. objNodeList.item(i).childNodes.item(0부터 노드의 갯수만큼).text
   • FF의 경우 노드별로 text를 불러들이는 함수가 없고 대신 textContent라는 속성이 존재하여 해당 노드의 값을 저장한다. 따라서 위에서 사용한 부분이 FF에서는 아래와 같이 변형되어진다.
   • textContent 속성은 FF에서만 사용이 가능하나 W3C 규약에 정해져 있다. (그러나 타 브라우저에서 지원하지 않고 있는 실정이다.)
   • 1. if (objNodeList.item(i).nodeName != "#text") { 
        1. objNodeList.item(i).childNodes.item(1..3..5..7의 노드텍스트 속성이 존재하는 부분).textContent;
     2. }
   •   [여백]
6. FF의 경우 vbScript를 지원하지 않는다.

 출처 : actionrun jquery 어딘가.;;