IE와 Firefox의 Javascript 호환성 요약 [추천 모음]_javascript 기술

JavaScript 호환성은 오랫동안 웹 개발자에게 주요 문제였습니다. 많은 개발자들이 공식 사양, 사실상의 표준, 구현 간의 차이점으로 인해 어려움을 겪고 있습니다. 이를 위해 주로 다음과 같은 측면에서 IE와 Firefox의 Javascript 호환성을 요약합니다.

1. 기능 및 메소드의 차이점 2. 스타일 액세스 및 설정 3. DOM 메소드 및 객체 인용문; > 4. 이벤트 처리
5. 기타 차이점의 호환 처리.


1. 함수와 메소드의 차이점

1. getYear() 메소드 [분석 설명] 먼저 다음 코드를 살펴보세요.

코드 복사 코드는 다음과 같습니다. var year= new Date().getYear()

document. write(year);

IE에서 얻는 날짜는 "2010"이고 Firefox에서 보는 날짜는 "110"입니다. 이는 주로 Firefox의 getYear가 "현재 연도-" 값을 반환하기 때문입니다. 1900".
[호환 처리]

　다음과 같은 올해의 판정을 추가합니다.

코드 복사 코드는 다음과 같습니다. 다음과 같습니다: var year= new Date().getYear()

year = (year<1900?(1900 year):year)

document.write(year); );


getFullYear를 통해 호출할 수도 있습니다. getUTCFullYear:

코드 복사 코드는 다음과 같습니다. 다음: var year = new Date().getFullYear()

document.write(year)

2. >[분석 설명] IE에서는 eval("idName") 또는 getElementById("idName")를 사용하여 ID가 ​​idName인 HTML 개체를 가져올 수 있습니다. Firefox에서는 getElementById("idName")만 사용하여 가져올 수 있습니다. ID가 idName인 HTML 개체입니다.
[호환성 처리] id가 idName인 HTML 객체를 얻으려면 getElementById("idName")를 균일하게 사용하십시오.

3. const 문
[분석 설명] IE에서는 const 키워드를 사용할 수 없습니다. 예:
const constVar = 32;
이것은 IE의 구문 오류입니다.
[호환성 처리] const를 사용하지 말고 대신 var를 사용하세요.

4. var
[분석 지침] 다음 코드를 참조하세요.




코드 복사

echo=function(str){ document.write(str);

}

이 함수는 IE에서 정상적으로 실행됩니다. 하지만 Firefox에서는 그렇지 않습니다. 오류가 보고되었습니다.
[호환성 처리] echo 앞에 var를 추가하는 것이 일반적입니다. 이것이 우리가 var를 언급하는 목적입니다.

5. const 문제
[분석 설명] IE에서는 const 키워드를 사용할 수 없습니다. const constVar = 32; 이는 IE의 구문 오류입니다.
【해결책】const를 사용하지 말고 대신 var를 사용하세요.


2. 스타일 액세스 및 설정

1. CSS "float" 속성
[분석 설명] 주어진 CSS 값에 액세스하는 Javascript의 가장 기본적인 구문은 다음과 같습니다. .style.property이지만 일부 CSS 속성은 "float", "for", "class" 등과 같은 Javascript의 예약어와 동일한 이름을 갖습니다. 브라우저마다 작성 방법이 다릅니다. IE에서는 다음과 같이 작성하세요.
document.getElementById("header").style.styleFloat = "left"; Firefox에서는 다음과 같이 작성하세요.
document.getElementById("header"). style.cssFloat = "left";
[호환성 처리] 브라우저가 IE인지 확인하기 위해 쓰기 전에 판단을 추가합니다:
if(document.all){
　document.getElementById("header") . style.styleFloat = "left";
}
else{
　document.getElementById("header").style.cssFloat = "left"

2. 태그의 "for"
[분석 설명] "float" 속성과 마찬가지로 태그의 "for"에 액세스하려면 보이지 않는 구문 구별을 사용해야 합니다.
IE에서 작성하세요:




코드 복사

코드는 다음과 같습니다. 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("header");
var myAttribute = myObject.getAttribute("className")

IE8.0 및 Firefox에 적용 가능 작성 방법:

코드 복사 코드는 다음과 같습니다.

var myObject = document.getElementById ("header");
var myAttribute = myObject.getAttribute("class");

또한, Class 속성을 설정하기 위해 setAttribute()를 사용할 때 두 브라우저에는 같은 차이.
SetAttribute("className",value);
이 쓰기 방법은 IE8.0 이전의 모든 IE 버전에 적용 가능합니다. 참고: IE8.0은 "className" 속성도 지원하지 않습니다.
SetAttribute("class",value); IE8.0 및 Firefox에 적용됩니다.
[호환성 처리]
방법 1, 둘 다 작성:

코드 복사 코드는 다음과 같습니다.

var myObject = document.getElementById("header");
myObject.setAttribute("class","classValue")
myObject.setAttribute("className","classValue" )
//헤더 클래스를 classValue

방법 2, IE와 FF 모두 object.className을 지원하므로 다음과 같이 작성할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var myObject = document.getElementById("header")
myObject. className="classValue";/ / 헤더 클래스를 classValue로 설정

방법 3, 먼저 브라우저 유형을 결정한 다음 브라우저 유형에 따라 해당 쓰기 방법을 사용합니다.

4. 개체 너비 및 높이 할당 문제
[분석 설명] FireFox의 obj.style.height = imgObj.height와 같은 문은 유효하지 않습니다.
[호환성 처리] obj.style.height = imgObj.height 'px';

3. DOM 메소드 및 객체 참조
1. 분석 설명] 먼저 코드 세트를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

< ;!-- 입력 개체 액세스 1 -->
value="click me" ōnclick="alert(id.value) )"/>

Firefox에서는 버튼이 반응하지 않지만 IE에서는 괜찮습니다. IE에서는 HTML 요소의 ID를 변수 이름으로 직접 사용할 수 있기 때문입니다. Firefox에서는 할 수 없습니다.
[호환성 처리] 객체에 접근할 때 document.getElementById("id")를 사용하여 ID로 객체에 접근하고, ID는 페이지 내에서 고유해야 합니다. 태그 이름 객체에 액세스하려면 document.getElementsByTagName("div")[0]을 사용합니다. 이 방법은 많은 브라우저에서 지원됩니다.

코드 복사 코드는 다음과 같습니다.