IE 및 FF_기본 지식에서의 JavaScript 호환성 문제

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

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

1. 기능 및 메소드의 차이점
3. DOM 메소드 및 객체 참조
>5.기타 차이점 호환 처리.

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

1. getYear() 메소드

[분석 지침] 먼저 다음 코드를 살펴보세요.

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

document.write(연도)

IE에서 얻은 날짜는 "2010"이고 Firefox에 표시되는 날짜는 "110"입니다. 이는 주로 Firefox의 getYear가 "현재 연도-1900" 값을 반환하기 때문입니다.

[호환성 처리] 다음과 같은 올해의 판단을 추가합니다.

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

연도 = (연도document.write(연도)



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

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

document.write(연도);

2. eval() 함수

【분석 설명】IE에서는 eval("idName") 또는 getElementById("idName")를 사용하여 idName의 HTML 개체를 가져올 수 있습니다. Firefox에서는 getElementById("idName")만 사용할 수 있습니다. idName의 HTML 객체 ID를 가져옵니다.

[호환성 처리] id가 idName인 HTML 객체를 얻으려면 getElementById("idName")를 균일하게 사용하십시오.

3. const 문

【분석 참고 사항】 IE에서는 const 키워드를 사용할 수 없습니다. 예:

코드 복사 코드는 다음과 같습니다.const constVar = 32;

IE의 구문 오류입니다.

[호환성 처리] const를 사용하지 말고 대신 var를 사용하세요.

4. 변수

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

코드 복사 코드는 다음과 같습니다.echo=function(str){

문서.쓰기(str);

}



이 기능은 IE에서는 정상적으로 실행되지만, Firefox에서는 오류가 보고됩니다.

[호환성 처리] echo 앞에 var를 추가하는 것이 일반적입니다. 이것이 우리가 var를 언급하는 목적입니다.

5. const 문제

【분석 참고 사항】 IE에서는 const 키워드를 사용할 수 없습니다. const constVar = 32; 이는 IE의 구문 오류입니다.

【해결책】const를 사용하지 말고 대신 var를 사용하세요.

2. 스타일 접근 및 설정

1. CSS "부동" 속성

[분석 설명] 주어진 CSS 값에 접근하기 위한 Javascript의 가장 기본적인 구문은 object.style.property이지만 일부 CSS 속성은 "float", "for"와 같은 Javascript의 예약어와 이름이 동일합니다. , "class "잠깐만요. 브라우저마다 다르게 작성됩니다.

IE에서는 다음과 같이 작성하세요.

코드 복사 코드는 다음과 같습니다.document.getElementById("header"). style.styleFloat = "왼쪽";

Firefox에서 다음을 작성하세요.

코드 복사 코드는 다음과 같습니다.document.getElementById("header"). style.cssFloat = "왼쪽"

[호환성 처리] 브라우저가 IE인지 확인하기 위해 쓰기 전에 판단을 추가합니다:

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

if(document.all){ //
　document.getElementById("header").style.styleFloat = "left";
}
else{ //정의되지 않은 경우
　document.getElementById("header").style.cssFloat = "왼쪽"
}

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");

또한 setAttribute()를 사용하여 Class 속성을 설정할 때 두 브라우저 간에 동일한 차이점이 있습니다.

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

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. 개체 너비 및 높이 할당 문제

[분석 설명] obj.style.height = imgObj.height와 유사한 문은 FireFox에서 유효하지 않습니다.

[호환성 처리] obj.style.height = imgObj.height 'px' 사용;

5. 스타일 추가

[분석 설명] IE에서 스타일을 추가하려면 addRules() 메서드를 사용하세요. styleSheet.addRule("p","color:#ccc",styleSheet.length) 이 메서드는 FF와 호환되지 않습니다. FF() 메소드 교체에서는 insetRule을 사용합니다. styleSheet.insertRule("p{color:#ccc}",styleSheet.length) 등이 있습니다.

【호환 처리】

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

if(styleSheet.insertRule){
　// insertRule() 메소드
}else{
　//addRule() 메소드
}

6. 최종 스타일

【분석 설명】클래스 선택기로 정의된 스타일과 태그 선택기로 정의된 스타일 등 스타일이 중복되어 맞춤 스타일이 무효화되는 경우가 있는데, 이 경우 후자가 유효하지 않게 됩니다. 그런 다음 이때 최종 스타일을 사용해야 합니다. IE의 최종 스타일은 ele.currentStyle.property 이름으로 작성됩니다. DOM의 표준 작성 방법은 document.defaultView.getComputeStyle(elel,null)과 같은 document.defaultView 객체를 사용하는 것입니다.

[호환성 처리] 먼저 브라우저(document.all)를 확인한 후 위의 방법을 실행합니다.

3. DOM 메소드 및 객체 참조

1. getElementById

[분석 지침] 먼저 코드 세트를 살펴보겠습니다.

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

value="나를 클릭하세요" ōnclick="alert(id.value)"/>

Firefox에서는 버튼이 반응하지 않지만 IE에서는 괜찮습니다. IE의 경우 HTML 요소의 ID를 스크립트에서 변수 이름으로 직접 사용할 수 있지만 Firefox에서는 사용할 수 없기 때문입니다.

[호환성 처리] 객체에 접근할 때 document.getElementById("id")를 사용하여 ID로 객체에 접근하고, ID는 페이지 내에서 고유해야 합니다. 태그 이름 객체에 액세스하려면 document.getElementsByTagName("div")[0]을 사용합니다. 이 방법은 많은 브라우저에서 지원됩니다.

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

onclick="alert(document.getElementById('id').value)" />

2. 컬렉션 클래스 객체 액세스

[분석 설명] IE에서는 () 또는 []를 사용하여 컬렉션 개체를 얻을 수 있지만 Firefox에서는 []만 사용하여 컬렉션 개체를 얻을 수 있습니다. 예:

document.write(document.forms("formName").src);

//이 작성 방법은 IE에서 Form 개체의 scrc 속성에 액세스할 수 있습니다

【호환성 처리】 document.forms("formName")를 document.forms["formName"]으로 변경합니다. 컬렉션 클래스 객체를 얻으려면 []를 균일하게 사용하십시오.

3. 프레임 참조

[분석설명] IE는 id나 name을 통해 이 프레임에 해당하는 window 객체에 접근할 수 있는 반면, Firefox는 name을 통해서만 이 프레임에 해당하는 window 객체에 접근할 수 있습니다.

예를 들어 위의 프레임 태그를 최상위 창 내부의 htm에 작성하면 다음과 같이 액세스할 수 있습니다.

IE: 이 창 개체에 액세스하려면 window.top.frameId 또는 window.top.frameName을 사용하세요.

Firefox: 이 창 개체는 window.top.frameName을 통해서만 액세스할 수 있습니다.

[호환성 처리] 프레임 이름을 사용하여 프레임 개체에 액세스합니다. 또한 IE 및 Firefox에서도 사용할 수 있습니다

window.document.getElementById("frameId")를 사용하여 이 프레임 객체에 액세스합니다.

4.부모요소

[분석 설명] IE는 parentElement와 parentNode를 사용하여 부모 노드를 얻는 것을 지원합니다. Firefox는 parentNode만 사용할 수 있습니다.

[호환성] firefox와 IE 모두 DOM을 지원하므로 parentNode를 사용하여 상위 노드에 액세스합니다.

5. 테이블 운영

[분석 설명] IE의 표에서는 를 삽입하기 위해 innerHTML을 사용하든,appendChild를 사용하든 아무런 효과가 없지만 다른 브라우저에서는 정상적으로 표시됩니다.

[호환성 처리] 해결책은 아래와 같이 테이블의 요소에 를 추가하는 것입니다.

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

var row = document.createElement("tr ");

var cell = document.createElement("td");
var cell_text = document.createTextNode("콘텐츠 삽입");
cell.appendChild(cell_text);
row.appendChild (셀);
document.getElementsByTagName("tbody")[0].appendChild(row);

6. 노드 제거removeNode() 및removeChild()

【분석 설명】appendNode는 IE와 Firefox에서 정상적으로 사용할 수 있지만, RemoveNode는 IE에서만 사용할 수 있습니다.

removeNode 메소드의 기능은 노드를 삭제하는 것입니다. 구문은 node.removeNode(false) 또는 node.removeNode(true)입니다. 반환 값은 삭제된 노드입니다.

removeNode(false)는 지정된 노드만 삭제한 후 이 노드의 원래 하위 노드를 원래 상위 노드의 하위 노드로 승격시키는 것을 의미합니다.

removeNode(true)는 지정된 노드와 모든 하위 노드를 삭제하는 것을 의미합니다. 삭제된 노드는 고아 노드가 되며 더 이상 하위 노드와 상위 노드를 갖지 않습니다.

[호환성 처리] Firefox에는 노드에 대한 RemoveNode 메소드가 없으며, RemoveChild 메소드로만 교체할 수 있습니다. 먼저 상위 노드로 복귀한 후 상위 노드에서 제거할 노드를 제거합니다.

node.parentNode.removeChild(노드);

// IE와 Firefox에서 정상적으로 작동하려면 이전 레이어의 상위 노드를 가져온 다음 제거하세요.

7. childNodes가 획득한 노드

[분석 설명] IE와 Firefox에서는 childNodes의 첨자의 의미가 다릅니다. 다음 코드를 살펴보세요.

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

• 1


• 3
나!" onclick=
"alert(document.getElementById('main').childNodes.length)">



각각 IE와 Firefox로 실행하면 IE의 결과는 3, Firefox의 결과는 7입니다. Firefox는 DOM 사양을 사용합니다. "#text"는 텍스트(실제로 의미 없는 공백 및 줄 바꿈 등)를 나타냅니다. IE에서는 실제 의미가 있는 텍스트만 "#text"로 구문 분석됩니다. ". .

【호환 처리】

방법 1: 하위 노드를 얻을 때 node.getElementsByTagName()을 사용하면 이 문제를 피할 수 있습니다. 그러나 복잡한 DOM 구조 탐색에서는 getElementsByTagName이 childNodes만큼 좋지 않습니다. 왜냐하면 childNodes가 DOM 계층 구조를 더 잘 처리할 수 있기 때문입니다.

방법 2: 실제 애플리케이션에서 Firefox가 하위 노드를 순회할 때 for 루프에

를 추가하는 것이 좋습니다.

if(childNode.nodeName=="#text") continue;//또는 nodeType == 1을 사용하세요.

이렇게 하면 일부 텍스트 노드를 건너뛸 수 있습니다.

확장 독서

"IE와 FireFox의 childNodes의 차이점"

8. Firefox는 innerText를 지원하지 않습니다

[분석 설명] Firefox는 innerText를 지원하지 않습니다.innerText를 구현하기 위해 textContent를 지원합니다. 그러나 textContent는 innerText와 같은 요소의 표시 방법을 고려하지 않으므로 IE와 완전히 호환되지 않습니다. textContent를 사용하지 않는 경우 문자열에 HTML 코드가 없으면 innerHTML을 대신 사용할 수 있습니다. js를 사용하여 이를 구현하는 메서드를 작성할 수도 있습니다. "firefox에 대한 innerText 속성 구현" 문서를 참조할 수 있습니다.

[호환성 처리] 브라우저 유형을 결정하여 호환 가능:

코드 복사 코드는 다음과 같습니다.if(document.all){

document.getElementById('element').innerText = "내 텍스트";

} else{
document.getElementById('element').textContent = "내 텍스트"
}

4. 이벤트 처리

JavaScript를 사용할 때 이벤트 처리가 포함되는 경우 다양한 브라우저의 이벤트 차이를 알아야 합니다("한 번에 세 가지 이벤트 모델 지원" 참조). NN4, IE4 및 3가지 주요 JavaScript 이벤트 모델이 있습니다. W3C/사파르.

1. 윈도우.이벤트

[분석 지침] 먼저 코드를 살펴보겠습니다

코드 복사 코드는 다음과 같습니다.function et()

{

경고(이벤트);//IE: [객체]
}



위 코드를 IE에서 실행한 결과는 [object]인데, Firefox에서는 실행할 수 없습니다.

IE에서는 이벤트를 윈도우 객체의 속성으로 직접 사용할 수 있지만, 파이어폭스에서는 매개변수를 전달해 이벤트를 전파하는 W3C 모델을 사용하기 때문에 이벤트 응답 인터페이스를 제공해야 한다.

[호환성 처리] 다양한 브라우저에 따라 올바른 이벤트를 가져오기 위한 이벤트 판단 추가:

코드 복사 코드는 다음과 같습니다.function et()

{

evt =evt?evt:(window.event?window.event:null);
//IE 및 Firefox와 호환
alert(evt);
}

2. 키보드 값 얻기

[분석 설명] IE와 Firefox는 키보드 값을 얻는 방법이 다릅니다. Firefox의 event.which는 IE의 event.keyCode와 동일하다는 것을 알 수 있습니다. 차이점에 대해서는 "키보드 이벤트에서의 keyCode, which 및 charCode 호환성 테스트"를 참조하세요

【호환 처리】

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

function myKeyPress(evt){
//호환되는 IE 및 Firefox는 keyBoardEvent 객체를 얻습니다.
evt = (evt) ? evt : ((window.event) ? window.event : "")
//키 값을 얻기 위해 IE 및 Firefox와 호환됩니다. keyBoardEvent 객체
var key = evt.keyCode?evt.keyCode:evt.which
if(evt.ctrlKey && (key == 13 || key == 10)){
　　　　 // Ctrl과 Enter를 동시에 누르기 키
//뭔가를 하세요;
}
}

3. 이벤트 소스 얻기

[분석 설명] 이벤트 위임을 사용하면 이벤트가 어떤 요소에서 오는지 확인하기 위해 이벤트 소스를 얻습니다. 그러나 IE에서는 이벤트 개체에 srcElement 속성이 있지만 Firefox에서는 대상 속성이 없습니다. 대상 속성이 있지만 srcElement 속성이 없습니다.

【호환 처리】

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

ele=function(evt){ // 현재 이벤트 캡처 작업 개체
evt=evt||window.event;
return
(obj=event.srcElement?event.srcElement:event.target;);
}

4. 이벤트 모니터링

【분석 설명】이벤트 수신 및 처리 측면에서 IE는 attachmentEvent 및 detachEvent라는 두 가지 인터페이스를 제공하는 반면 Firefox는 addEventListener 및 RemoveEventListener를 제공합니다.

[호환성 처리] 가장 간단한 호환성 처리는 다음 두 인터페이스 세트를 캡슐화하는 것입니다.

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

function addEvent(elem, eventName, handler) {
if (elem.attachEvent) {
elem.attachEvent("on" eventName, function(){
handler.call(elem)})
//콜백 함수 call() 여기에서 사용됩니다. elem
} else if (elem.addEventListener) {
elem.addEventListener(eventName, handler, false)
}
}
function RemoveEvent(elem , eventName, handler) {
if (elem.detachEvent) {
elem.detachEvent("on" eventName, function(){
(), 이것을 elem을 가리키도록 하세요
　} else if ( elem.removeEventListener) {
　elem.removeEventListener(eventName, handler, false)
　}
}

Firefox에서는 이벤트 핸들러 함수의 이것이 모니터링되는 요소 자체를 가리키지만 IE에서는 콜백 함수 호출을 사용하여 현재 컨텍스트가 모니터링되는 요소를 가리키도록 할 수 있다는 점에 유의하는 것이 중요합니다. 요소.

5. 마우스 위치

[분석 설명] IE에서는 짝수 개체에 x, y 속성이 있지만, Firefox에서는 짝수 개체에 pageX, pageY 속성이 있지만 x, y 속성은 없습니다.

【호환성 처리】 IE에서는 event.x를, Firefox에서는 event.pageX를 바꾸려면 mX(mX = event.x ? event.x : event.pageX;)를 사용하세요. 일을 더 복잡하게 만들려면 절대 위치도 고려해야 합니다

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

function getAbsPoint(e){
var x = e.offsetLeft, y = e.offsetTop;
while (e = e.offsetParent) {
x = e.offsetLeft
y = e.offsetTop; Alert(" x:" x "," "y:" y)
}

5. 기타 차이점의 호환성 처리

1. XMLHttp요청

【분석 설명】new ActiveXObject("Microsoft.XMLHTTP"); IE에서만 작동하며 Firefox는 지원하지 않지만 XMLHttpRequest를 지원합니다.

【호환 처리】

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

function createXHR() {
var xhr=null;
if(window.XMLHttpRequest){
xhr=new ActiveXObject("Msxml2.XMLHTTP")
}else{
try {
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
catch() {
xhr=null;
}
if (!xhr)반환
xhr 반환
}

2. 모달 및 비모달 창

[분석 설명] IE에서는 showModalDialog, showModelessDialog를 통해 모달 창과 비모달 창을 열 수 있지만 Firefox에서는 이를 지원하지 않습니다.

【해결책】window.open(pageURL, 이름, 매개변수)을 직접 사용하여 새 창을 엽니다. 매개변수를 전달해야 하는 경우 프레임 또는 iframe을 사용할 수 있습니다.

3. input.type 속성 문제

input.type 속성은 IE에서는 읽기 전용이지만 Firefox에서는 수정할 수 있습니다

4. 선택 요소에 대한 옵션 작업

옵션 설정을 위해 IE와 Firefox는 작성 방법이 다릅니다.

Firefox: 직접 설정 가능

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

option.text = 'foooooooo';

IE: 설정만 가능

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

option.innerHTML = 'fooooooo';

선택한 옵션 삭제 방법:

Firefox: 예

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

select.options.remove(selectedIndex);

IE7: 사용 가능

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

select.options[i] = null;

IE6: 작성이 필요함

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

select.options[i].outerHTML = null;

5. img 개체 대체 및 제목 분석

[분석 설명] img 객체에는 alt와 title이라는 두 가지 속성이 있습니다. 차이점은 alt: 사진이 없거나 로드 오류가 있을 때 묻는 메시지입니다.

title: 사진의 팁 설명 IE에서 제목이 정의되지 않은 경우 alt를 img의 팁으로 사용할 수도 있습니다. 그러나 Firefox에서는 둘 다 표준에 정의된 대로 정확하게 사용됩니다.

img 객체를 정의할 때.

【호환성 처리】 다양한 브라우저에서 정상적으로 사용할 수 있도록 모든 alt 및 title 개체를 작성하는 것이 가장 좋습니다.

6. img src 새로고침 문제

[분석 지침] 먼저 코드를 살펴보겠습니다.

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

IE에서는 이 코드를 사용하여 이미지를 새로 고칠 수 있지만 FireFox에서는 사용할 수 없습니다. 주로 캐싱 문제입니다.

[호환성 처리] 문제 해결을 위해 주소 뒤에 임의의 숫자를 추가하세요:

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

요약

IE와 Firefox의 Javascript에는 많은 차이점이 있습니다. 호환성을 확보하려면 DOM 작업, 이벤트 처리, XMLHttpRequest 요청 등 몇 가지 일반적인 항목을 js 라이브러리로 구성해야 한다고 생각합니다. 또한 일부 기존 라이브러리(예: jQuery, YUI, ExtJs 등)를 사용하기로 선택했지만 이러한 차이점을 이해하는 것이 여전히 필요하다고 생각하며 이는 호환성 및 사용성 코드에 참여하는 데 도움이 될 것입니다.

항상 문제보다 해결책이 더 많습니다. 브라우저 호환성이 아무리 실망스럽더라도 프런트엔드 개발자는 언제나 쉽게 해결할 수 있습니다!