JavaScript 호환성은 오랫동안 웹 개발자에게 주요 문제였습니다. 공식 사양, 사실 표준 및 다양한 구현의 차이로 인해 많은 개발자가 낮과 밤을 겪게되었습니다. 이를 위해 IE와 Firefox의 JavaScript 호환성은 주로 다음과 같은 차이점에서 요약됩니다.
코드 사본은 다음과 같습니다.
1. 함수와 방법의 차이;
2. 스타일 액세스 및 설정;
3. DOM 방법 및 객체 참조;
4. 이벤트 처리;
5. 다른 차이에 대한 호환성 처리.
1. 함수와 방법의 차이
1. getyear () 메소드
[분석 지침] 다음 코드를 살펴 보겠습니다.
코드 사본은 다음과 같습니다.
var 년 = 새 날짜 (). getyear ();
document.write (연도);
IE에있는 날짜는 "2010"이고 Firefox에 표시되는 날짜는 "110"이며 주로 Firefox getyear가 "현재 1900 년"의 값을 반환하기 때문입니다.
【호환성 처리】 연도를 판단하기 위해 추가하십시오.
코드 사본은 다음과 같습니다.
var 년 = 새 날짜 (). getyear ();
연도 = (<1900? (1900+년) : 년);
document.write (연도);
당신은 또한 getly getupcily를 통해 그것을 호출 할 수 있습니다.
코드 사본은 다음과 같습니다.
var year = new date (). getlyear ();
document.write (연도);
2. 평가 () 함수
[분석 참고] IE에서는 Eval ( "Idname") 또는 getElementByid ( "idname")를 사용하여 idname을 가진 html 객체를 얻을 수 있습니다. Firefox에서는 getElementByid ( "idname") 만 사용하여 idname이있는 HTML 객체를 얻을 수 있습니다.
[호환성 처리] getElementById ( "idname")를 사용하여 idname이있는 idname을 사용하여 HTML 객체를 얻습니다.
3. Const 문
[분석 참고] Const 키워드는 IE에서 사용할 수 없습니다. 좋다:
코드 사본은 다음과 같습니다.
const constvar = 32;
즉, 이것은 구문 오류입니다.
【호환 처리】 var를 사용하지 마십시오. 대신 var를 사용하십시오.
4. var
[분석 지침] 다음 코드를 참조하십시오.
코드 사본은 다음과 같습니다.
echo = function (str) {
document.write (str);
}
이 기능은 IE에서 정상적으로 실행되지만 Firefox에서 오류가보고되었습니다.
[호환 처리] 에코 전에 VAR을 추가하는 것이 정상이며, 이것이 VAR에 대한 우리의 언급의 목적입니다.
5. Const 문제
[분석 참고] Const 키워드는 IE에서 사용할 수 없습니다. 예를 들어, const constvar = 32; 즉, 이것은 구문 오류입니다.
solution 솔루션 use const를 사용하지 말고 대신 var를 사용하십시오.
2. 스타일 액세스 및 설정
1. CSS의 "float"속성
[분석 노트] 주어진 CSS 값에 액세스하기위한 JavaScript의 가장 기본적인 구문은 : Object.style.Property이지만 일부 CSS 속성은 "float", "for", "class"등과 같은 JavaScript의 예약 된 단어 이름과 동일하며 쓰기 방법은 브라우저와 다릅니다.
즉, 이것을 작성하십시오.
코드 사본은 다음과 같습니다.
document.getElementById ( "헤더"). style.stylefloat = "left";
Firefox에서 다음을 작성하십시오.
코드 사본은 다음과 같습니다.
document.getElementById ( "헤더"). style.cssfloat = "왼쪽";
[호환성 처리] 쓰기 전에 판단을 추가하여 브라우저가 IE인지 확인합니다.
코드 사본은 다음과 같습니다.
if (document.all) {//
document.getElementById ( "헤더"). style.stylefloat = "left";
}
else {// IE가 아닌 경우 정의되지 않았습니다
document.getElementById ( "헤더"). style.cssfloat = "왼쪽";
}
2. <라벨> 태그에서 "Access"에 대한 액세스
[분석 참고] "float"속성과 마찬가지로 <라벨> 태그에서 "Access"에 대한 보이지 않는 구문 구분을 사용해야합니다.
즉, 이것을 작성하십시오.
코드 사본은 다음과 같습니다.
var myObject = document.getElementById ( "mylabel");
var myAttribute = myObject.getAttribute ( "htmlfor");
Firefox에서 다음을 작성하십시오.
코드 사본은 다음과 같습니다.
var myObject = document.getElementById ( "mylabel");
var myAttribute = myObject.getAttribute ( "for");
[호환성 처리] 솔루션은 먼저 브라우저 유형을 결정하는 것입니다.
3. 클래스 속성에 액세스하고 설정합니다
[분석 노트] 또한 클래스는 JavaScript 예약 단어이기 때문에이 두 브라우저는 다른 JavaScript 방법을 사용 하여이 속성을 얻습니다.
IE8.0 전에 모든 IE 버전을 작성하는 방법 :
코드 사본은 다음과 같습니다.
var myObject = document.getElementById ( "헤더");
var myAttribute = myObject.getAttribute ( "ClassName");
IE8.0 및 Firefox Writing에 적용 가능 :
코드 사본은 다음과 같습니다.
var myObject = document.getElementById ( "헤더");
var myAttribute = myObject.getAttribute ( "class");
또한 setAttribute ()를 사용하여 클래스 속성을 설정할 때 두 브라우저도 동일한 차이를 갖습니다.
코드 사본은 다음과 같습니다.
setAttribute ( "className", value);
이 작문 방법은 IE8.0 이전의 모든 IE 버전에 적용 할 수 있습니다. 참고 : IE8.0은 "ClassName"속성을 지원하지 않습니다.
setAttribute ( "클래스", 값); IE8.0 및 Firefox에 적합합니다.
【호환 처리】
방법 1, 둘 다 씁니다.
코드 사본은 다음과 같습니다.
var myObject = document.getElementById ( "헤더");
myObject.setAttribute ( "class", "classValue");
myObject.setAttribute ( "className", "classValue");
// 헤더 클래스를 classValue로 설정합니다
방법 2 : IE 및 FF 지원 Object.ClassName이므로 다음과 같이 쓸 수 있습니다.
코드 사본은 다음과 같습니다.
var myObject = document.getElementById ( "헤더");
myObject.className = "classValue"; // 헤더 클래스를 classValue로 설정합니다
방법 3 : 먼저 브라우저 유형을 판단한 다음 브라우저 유형에 따라 해당 쓰기 방법을 사용하십시오.
4. 객체 너비 및 높이 할당 문제
[분석 참고] OBJ.style.height = imgobj.height in Firefox와 유사한 진술은 유효하지 않습니다.
【호환 처리】 Obj.style.height = imgobj.height + 'px'를 사용합니다.
5. 스타일을 추가하십시오
[분석 참고] IE에서는 addrule () 메소드를 사용하여 다음과 같은 스타일을 추가하십시오. 그러나이 방법은 FF와 호환되지 않으며 Insetrule () 메소드를 사용하여 FF로 대체합니다. Stylesheet.insertrule과 같은 ( "P {색상 : #ccc}", Stylesheet.length).
【호환 처리】
코드 사본은 다음과 같습니다.
if (Stylesheet.insertrule) {
// inSERTRULE () 메소드
}또 다른{
// addRule () 메소드
}
6. 최종 스타일
[분석 노트] 클래스 선택기에 의해 정의 된 스타일과 레이블 선택기에 의해 정의 된 스타일과 같은 스타일 중첩이 발생하기 때문에 때때로 우리의 사용자 정의 스타일이 실패하며, 후자는 현재 유효하지 않습니다. 그런 다음 최종 스타일을 사용해야합니다. IE의 최종 스타일은 Ele.CurrentStyle로 작성되었습니다. 속성 이름. DOM의 표준 쓰기 방법은 FF와 호환되는 Document.DefaultView.GetComputedStyle (Elel, NULL)과 같은 Document.DefaultView 객체를 사용하는 것입니다.
[호환성 처리] 먼저 브라우저 (document.all)를 판단한 다음 위의 메소드를 실행하십시오.
3. DOM 방법 및 객체 참조
1. GetElementById
[분석 지침] 코드 세트를 살펴 보겠습니다.
<!-입력 객체 액세스 1->
코드 사본은 다음과 같습니다.
<입력 ID = "ID"유형 = "버튼"
value = "Click Me"ōnClick = "Alert (id.Value)"/>
Firefox에서는 버튼이 응답하지 않습니다. 즉, IE의 경우 HTML 요소의 ID는 스크립트에서 변수 이름으로 직접 사용할 수 있지만 Firefox에서는 직접 사용할 수 있기 때문에 괜찮습니다.
[호환성 처리] W3C DOM 쓰기를 사용해보십시오. 객체에 액세스 할 때는 document.getElementById ( "ID")를 사용하여 ID로 객체에 액세스하고 페이지에서 ID가 고유해야합니다. 또한 태그 이름이있는 객체에 액세스 할 때 Document.GetElementsByTagName ( "div") [0]을 사용하십시오. 이 방법은 더 많은 브라우저에서 지원됩니다.
<!-입력 객체 액세스 2->
코드 사본은 다음과 같습니다.
<입력 id = "id"type = "button"value = "Click Me"
onclick = "alert (document.getElementById ( 'id'). value)" />
2. 컬렉션 클래스 객체 액세스
[분석 참고] IE에서 () 또는 []를 사용하여 컬렉션 클래스 객체를 얻을 수 있습니다. Firefox에서는 Collection Class 객체를 얻기 위해 [] 만 사용할 수 있습니다. 좋다:
document.write (document.forms ( "formname"). src);
//이 쓰기 메소드는 IE 아래 양식 개체의 SCR 속성에 액세스 할 수 있습니다.
Compatibility Processing】 Document.Forms ( "FormName")를 문서로 변경하십시오. []를 사용하여 통일 된 방식으로 수집 클래스 객체를 얻습니다.
3. 프레임의 참조
[분석 참고] IE는 ID 또는 이름을 통해이 프레임에 해당하는 창 객체에 액세스 할 수 있지만 Firefox는 이름을 통해이 프레임에 해당하는 창 객체에만 액세스 할 수 있습니다.
예를 들어, 위의 프레임 태그가 가장 맨 위 창의 HTM에 작성된 경우 다음과 같이 액세스 할 수 있습니다.
IE : Window.top.FrameID 또는 Window.Top.Top.FramEname이 Window 개체에 액세스 할 수 있습니다.
Firefox : Only Window.top.framename을 사용 하여이 창 객체에 액세스 할 수 있습니다.
【호환 처리】 프레임 이름을 사용하여 프레임 객체에 액세스하십시오. 또한 IE와 Firefox는 모두
이 프레임 객체에 액세스하려면 window.document.getElementById ( "frameid").
4. 부모
[분석 설명] IE는 부모 노드를 얻기 위해 ParentElement 및 ParentNode를 사용하여 지원합니다. Firefox는 ParentNode 만 사용할 수 있습니다.
[호환성 처리] Firefox와 IE가 모두 DOM을 지원하기 때문에 ParentNode는 부모 노드에 액세스하는 데 사용됩니다.
5. 테이블 작동
[분석 노트] IE 아래 표에서, 내부 html 또는 부록이 삽입되었는지 여부에 관계없이 효과가 없지만 다른 브라우저는 정상적으로 표시됩니다.
[호환 처리] 솔루션은 아래와 같이 테이블의 <tbody> 요소에 <tr>를 추가하는 것입니다.
코드 사본은 다음과 같습니다.
var row = document.createelement ( "tr");
var cell = document.createelement ( "TD");
var cell_text = document.creatextNode ( "삽입 된 컨텐츠");
cell.appendChild (Cell_Text);
Row.appendChild (셀);
document.getElementsByTagName ( "tbody") [0] .AppendChild (행);
6. 노드를 제거하고 제거하고 removeChild ()
[분석 참고] 부록은 IE 및 Firefox에서 정상적으로 사용할 수 있지만 IE에서만 Removenode를 사용할 수 있습니다.
removenode 메소드의 기능은 구문이 노드를 삭제하는 것입니다. 구문은 node.removenode (false) 또는 node.removenode (true)이며 리턴 값은 삭제 된 노드입니다.
removenode (false)는 지정된 노드 만 삭제 된 다음이 노드의 원래 하위 노드가 원래 부모 노드의 자식 노드로 홍보됩니다.
removenode (true)는 지정된 노드와 모든 하위 노드를 삭제하는 것을 의미합니다. 삭제 된 노드는 고아 노드가되고 더 이상 하위 노드와 부모 노드가 없습니다.
[호환성 처리] Firefox의 노드에는 Removenode 방법이 없으므로 RemoveChild 메소드로만 대체 할 수 있습니다. 먼저 상위 노드로 돌아가서 모 노드에서 제거 할 노드를 제거합니다.
node.parentNode.removeChild (노드);
// IE와 Firefox를 정상적으로 사용하려면 이전 레이어의 상위 노드를 가져간 다음 제거하십시오.
7. 어린이에 의해 얻은 노드
[분석 참고] Childnodes 첨자의 의미는 IE 및 Firefox에서 다릅니다. 다음 코드를 살펴 보겠습니다.
코드 사본은 다음과 같습니다.
<ul id = "main">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
</ul>
<입력 유형 = 버튼 값 = "나를 클릭하십시오!" onclick =
"Alert (document.getElementById ( 'main'). childnodes.length)">
IE와 Firefox로 각각 실행되는 IE의 결과는 3이고 Firefox는 7입니다. Firefox는 DOM 사양을 사용하며 "#Text"는 텍스트 (실제로 무의미한 공백 및 라인 브레이크 등)도 Firefox의 노드로 구문 분석됩니다. 즉, 실질적인 의미를 가진 텍스트 만 "#Text"로 구문 분석됩니다.
【호환 처리】
방법 1 : 자식 노드를 얻을 때 Node.getElementsByTagName () 로이 문제를 피할 수 있습니다. 그러나 getElementsByTagName은 복잡한 DOM 구조를 통과하는 데 어린이를 사용하는 것만 큼 좋지 않습니다. 어린이는 DOM 계층을 더 잘 처리 할 수 있기 때문입니다.
방법 2. 실제로 사용하면 Firefox가 자식 노드를 가로 지르면 For Loop에 추가 할 수도 있습니다.
if (childnode.nodename == "#text") 계속; // 또는 nodetype == 1을 사용하십시오.
이를 통해 일부 텍스트 노드를 건너 뛸 수 있습니다.
추가 독서
"IE와 Firefox의 어린이의 차이"
8. Firefox는 내 텍스트를 지원할 수 없습니다
[분석 참고] Firefox는 InnerText를 지원하지 않으며 InnerText를 구현하기 위해 TextContent를 지원하지만 TextContent는 InnerText와 같은 요소를 고려하지 않으므로 IE와 완전히 호환되지 않습니다. TextContent를 사용하지 않으면 문자열에는 HTML 코드가 포함되어 있지 않으며 InnerHTML로 대체 할 수도 있습니다. 또한 구현 방법을 작성할 수도 있습니다. "Firefox 용 내부 텍스트 속성 구현"기사를 참조하십시오.
【처리 비교 ing 브라우저 유형을 판단하여 비교 :
코드 사본은 다음과 같습니다.
if (document.all) {
document.getElementById ( 'element'). innerText = "내 텍스트";
} 또 다른{
document.getElementById ( 'element'). textContent = "내 텍스트";
}
4. 이벤트 처리
JavaScript를 사용할 때 이벤트 처리가 참여하는 경우 다른 브라우저의 이벤트 차이점을 알아야합니다. 3 가지 주요 JavaScript 이벤트 모델이 있습니다 (한 번에 3 개의 이벤트 모델 지원 "은 NN4, IE4+ 및 W3C/Safar입니다.
1. Window.event
【분석 지침 instr 코드를 먼저 살펴보십시오
코드 사본은 다음과 같습니다.
함수 et ()
{
경고 (이벤트); // 즉 : [개체]
}
위의 코드의 결과 IE에서 실행되는 결과는 [Object]이지만 Firefox에서는 실행할 수 없습니다.
이벤트는 IE에서 창 객체의 속성으로 직접 사용할 수 있지만 Firefox에서는 W3C 모델이 사용되므로 매개 변수를 전달하는 방법을 통해 이벤트를 전파합니다. 즉, 기능에 대한 이벤트 응답 인터페이스를 제공해야합니다.
[호환성 처리] 이벤트 판단을 추가하고 브라우저에 따라 올바른 이벤트를 얻습니다.
코드 사본은 다음과 같습니다.
함수 et ()
{
evt = evt? evt : (window.event? window.event : null);
// IE 및 Firefox와 호환됩니다
경고 (EVT);
}
2. 키보드 값 획득
[분석 참고] IE 및 Firefox에서 키보드 값을 얻는 방법은 다릅니다. Firefox 하에서 이벤트가 이벤트와 동일하다는 것을 이해할 수 있습니다. 서로의 차이점에 대해서
【호환 처리】
코드 사본은 다음과 같습니다.
기능 mykeypress (evt) {
// KeyboardEvent 객체를 얻으려면 IE 및 Firefox와 호환됩니다
EVT = (EVT)? evt : ((window.event)? window.event : "")
// keyboardevent 객체의 키 값을 얻으려면 IE 및 Firefox와 호환됩니다.
var key = evt.keycode? evt.keycode : evt. whith;
if (evt.ctrlkey && (key == 13 || key == 10)) {
// ctrl과 Enter는 동시에 누릅니다
// 무언가를합니다.
}
}
3. 이벤트 소스 획득
[분석 참고] 이벤트 대의원을 사용할 때 이벤트 소스 획득을 통해 이벤트가 어떤 요소를 결정할 수 있는지 확인할 수 있습니다. 그러나 즉, 이벤트 객체에는 srcelement 속성이 있지만 대상 특성은 없습니다. Firefox에서 짝수 객체에는 대상 특성이 있지만 srcelement 속성은 없습니다.
【호환 처리】
코드 사본은 다음과 같습니다.
ele = function (evt) {// 현재 이벤트가 작동하는 객체를 포착
evt = evt || window.event;
반품
(obj = event.srcelement? event.srcelement : event.target;);
}
4. 이벤트 모니터링
[분석 참고] 이벤트 청취 및 처리 측면에서 IE는 두 가지 인터페이스를 제공합니다. 첨부 및 Detachevent, Firefox는 addeventListener 및 RemoveEventListener를 제공합니다.
[호환성 처리] 가장 간단한 호환성 처리는이 두 인터페이스 세트를 캡슐화하는 것입니다.
코드 사본은 다음과 같습니다.
함수 addevent (Elem, EventName, Handler) {
if (elem.attachevent) {
elem.attachevent ( "on" + eventName, function () {
handler.call (elem)});
// 여기에서 콜백 함수 호출을 사용 하고이 점을 Elem에게 두십시오.
} else if (elem.addeventListener) {
elem.addeventListener (EventName, Handler, False);
}
}
함수 removeEvent (Elem, EventName, Handler) {
if (elem.detachevent) {
elem.detachevent ( "on" + eventName, function () {
handler.call (elem)});
// 여기에서 콜백 함수 호출을 사용 하고이 점을 Elem에게 두십시오.
} else if (elem.removeEventListener) {
elem.removeEventListener (EventName, Handler, False);
}
}
Firefox에서는 이벤트 처리 기능이 청취 된 요소 자체를 가리키지 만 콜백 함수 호출을 사용하여 현재 컨텍스트가 듣는 요소를 가리 키도록 할 수 있습니다.
5. 마우스 위치
[분석 참고] IE에서 짝수 객체에는 X 및 Y 속성이 있지만 Pagex 및 Pagey 속성은 없습니다. Firefox에서 짝수 객체에는 pagex 및 pagey 속성이 있지만 x 및 y 속성은 없습니다.
[호환성 처리] MX (mx = event.x? event.x : event.pagex;)를 사용하여 event.x 또는 event.pagex에서 firefox에서 event.x를 대체합니다. 절대 위치는 복잡한 지점에서 고려되어야합니다
코드 사본은 다음과 같습니다.
함수 getAbspoint (e) {
var x = E.OffSetLeft, y = E.OffSetTop;
while (e = e.offsetparent) {
x += E.OffSetLeft;
y += E.OffSetTop;
}
경고 ( "x :" + x + "," + "y :" + y);
}
5. 다른 차이의 호환성 처리
1. xmlhttprequest
[분석 참고] New ActiveXobject ( "Microsoft.xmlhttp"); IE에서만 작동합니다. Firefox는이를 지원하지 않지만 xmlhttprequest를 지원합니다.
【호환 처리】
코드 사본은 다음과 같습니다.
함수 createxhr () {
var xhr = null;
if (window.xmlhttprequest) {
xhr = new ActiveXobject ( "msxml2.xmlhttp");
}또 다른{
노력하다 {
xhr = new ActiveXobject ( "microsoft.xmlhttp");
}
잡다() {
xhr = null;
}
}
if (! xhr) 반환;
XHR 리턴;
}
2. 모달 및 비 모달 창
[분석 참고] IE에서는 쇼 모도 알디 디아 로그 및 쇼 모드리스 디 알로그를 통해 모달과 비 모달 창을 열 수 있지만 Firefox는이를 지원하지 않습니다.
[솔루션] Window.open (PageUrl, 이름, 매개 변수)을 사용하여 새 창을 열십시오. 매개 변수를 전달 해야하는 경우 프레임 또는 iframe을 사용할 수 있습니다.
3. 입력. 타입 속성 문제
IE의 입력. 타입 속성은 읽기 전용이지만 Firefox에서 수정할 수 있습니다.
4. 선택 요소에서 옵션 작동
옵션 세트, 즉 IE 및 Firefox는 다르게 작성됩니다.
Firefox : 직접 설정할 수 있습니다
코드 사본은 다음과 같습니다.
옵션 .text = 'fooooooooo';
IE : 만 설정
코드 사본은 다음과 같습니다.
옵션 .innerhtml = 'fooooooo';
선택 옵션을 삭제하는 메소드 :
Firefox : 그렇습니다
코드 사본은 다음과 같습니다.
select.options.remove (selectedIndex);
IE7 : 사용할 수 있습니다
코드 사본은 다음과 같습니다.
select.options [i] = null;
IE6 : 글을 써야합니다
코드 사본은 다음과 같습니다.
select.options [i] .outerhtml = null;
5. IMG 객체 Alt 및 Title의 분석
[분석 참고] IMG 객체에는 Alt와 Title의 두 가지 속성이 있습니다. 차이점은 Alt : 사진이 존재하지 않거나 부하가 잘못된 경우 프롬프트입니다.
제목 : 사진의 팁 설명. 제목이 IE에서 정의되지 않으면 ALT는 IMG의 끝으로도 사용할 수 있지만 Firefox에서는 표준의 정의에 따라 정확히 사용됩니다.
IMG 객체를 정의 할 때.
[호환 처리] 다양한 브라우저에서 정상적으로 사용할 수 있도록 모든 ALT 및 제목 개체를 작성하는 것이 가장 좋습니다.
6. IMG의 SRC 새로 고침 문제
[분석 지침] 먼저 코드를 살펴 보겠습니다.
코드 사본은 다음과 같습니다.
<img id = "pic"onclick = "this.src = 'a.jpg'"src = "aa.jpg"style = "커서 : 포인터"/>
즉,이 코드는 이미지를 새로 고치는 데 사용될 수 있지만 Firefox에서는 아닙니다. 주로 캐싱 문제입니다.
[호환성 처리] 주소가 해결 된 후 무작위 숫자를 추가하면 다음을 해결합니다.
코드 사본은 다음과 같습니다.
<img id = "pic"onclick = "javaScript : this.src = this.src+'?'+math.random ()"src = "a.jpg"style = "커서 : 포인터"/>
요약
IE와 Firefox 사이에는 JavaScript에는 많은 차이가 있습니다. 호환 되려면 DOM 운영, 이벤트 처리, XMLHTTPREQUEST 요청 등과 같은 JS 라이브러리로 공통된 것을 구성해야한다고 생각합니다. 또는 기존 라이브러리 (예 : jQuery, Yui, ExtJ 등)를 사용할 수도 있습니다. 그러나 이러한 차이점을 이해해야한다고 생각합니다. 이는 호환성 및 유용성 코드에 참여하는 데 매우 도움이됩니다.
문제보다 항상 더 많은 해결책이 있습니다. 브라우저가 어떻게 호환 되더라도 프론트 엔드 개발을 항상 해결할 수 있습니다!