IE와 Firefox의 JavaScript 차이점과 대체 구현 방법_javascript 기술

IE와 Firefox에서 js를 다룰 때 종종 호환성 문제가 발생합니다. 다음은 모두가 자세히 살펴보고 연구하기를 바랍니다.

1.document.formName.item("itemName") 문제

설명: IE에서는 document.formName.item("itemName") 또는 document.formName을 사용할 수 있습니다. . elements["elementName"]; Firefox에서는 document.formName.elements["elementName"]만 사용할 수 있습니다.
해결책: document.formName.elements["elementName"]를 균일하게 사용하세요.

2. 컬렉션 개체 문제

설명: IE에서는 () 또는 []를 사용하여 컬렉션 개체를 얻을 수 있지만, Firefox에서는 []만 사용하여 컬렉션 개체를 얻을 수 있습니다.
해결 방법: []를 균일하게 사용하여 컬렉션 클래스 개체를 가져옵니다.

3. 사용자 정의 속성 문제

설명: IE에서는 가져오는 방법을 사용할 수 있습니다. 일반 속성의 경우 getAttribute()를 사용하여 사용자 정의 속성을 얻을 수도 있습니다. Firefox에서는 getAttribute()만 사용하여 사용자 정의 속성을 얻을 수 있습니다.
해결책: getAttribute()를 통해 균일하게 사용자 정의 속성을 가져옵니다.

4.eval("idName") 문제

설명: IE에서는 eval("idName") 또는 getElementById("idName")를 사용하여 HTML을 가져올 수 있습니다. id가 idName 개체인 경우 Firefox에서는 getElementById("idName")만 사용하여 id가 idName인 HTML 개체를 얻을 수 있습니다.
해결책: getElementById("idName")를 균일하게 사용하여 idName.

5. 변수 이름이 HTML 개체의 ID와 동일한 문제

설명: IE에서는 HTML의 ID입니다. object는 문서의 하위 개체의 변수 이름으로 직접 사용할 수 있지만 Firefox에서는 사용할 수 없습니다. IE에서는 사용할 수 없는 HTML 개체 ID와 동일한 변수 이름을 사용할 수 있습니다.
해결책: document.idName 대신 document.getElementById("idName")를 사용하십시오. 오류를 줄이려면 동일한 HTML 객체 ID를 가진 변수 이름을 사용하지 않는 것이 가장 좋습니다. 변수를 선언할 때 모호함을 피하기 위해 항상 var를 추가하세요. >

6.const 문제
설명: Firefox에서는 const 키워드 또는 var 키워드를 사용하여 IE에서는 var 키워드만 사용할 수 있습니다. 상수를 정의합니다.
해결책: 상수를 정의하려면 var 키워드를 균일하게 사용합니다.


7. input.type 속성 문제
설명: IE에서의 input.type 속성은 읽기 전용이지만 Firefox의 input.type 속성은 읽기-쓰기입니다.


8.window.event 문제
설명: window.event는 IE Run에서는 사용할 수 있지만 Firefox에서는 실행할 수 없습니다. Firefox의 이벤트는 이벤트가 발생한 장면에서만 사용할 수 있기 때문입니다.
해결 방법:
IE:

...

IE&Firefox:

...



9.event.x 및 event.y 문제
설명: IE에서는 짝수 개체가 x, y 속성, 그러나 Firefox에서는 pageX, pageY 속성이 없습니다. 짝수 객체에는 pageX, pageY 속성이 있지만 x, y 속성은 없습니다.
해결책: mX(mX = event.x ? event.x)를 사용하세요. : event.pageX;) IE에서는 event.x를 바꾸거나 Firefox에서는 event.pageX를 바꾸십시오.


10.event.srcElement 문제
설명: IE에서는 짝수 객체에는 srcElement 속성이 없습니다. Firefox에서는 even 객체에 target 속성이 있지만 srcElement 속성은 없습니다.
해결책: obj를 사용하세요(obj = event.srcElement ? event.srcElement : event.target). ;) Firefox의 srcElement 또는 event.target 대신


11.window.location.href 문제
설명: IE 또는 Firefox2.0 .x의 경우 window.location 또는 window.location.href를 사용할 수 있습니다. Firefox1.5.x에서는 window.location만 사용할 수 있습니다.
해결책: window.location.href 대신 window.location을 사용하세요.


12 .모달 및 비모달 창 문제
설명: IE에서는 showModalDialog 및 showModelessDialog를 통해 모달 및 비모달 창을 열 수 있습니다. 이는 Firefox에서는 불가능합니다. .
해결책: 직접 사용 window.open(pageURL,name,parameters) 메소드는 새 창을 엽니다. 하위 창의 매개변수를 상위 창으로 다시 전달해야 하는 경우 하위 창에서 window.opener를 사용하여 상위 창에 액세스할 수 있습니다. 예: var parWin = window.opener.getElementById("Aqing ").value = " Aqing";


13.프레임 문제
다음 프레임을 예로 들어 보겠습니다.


(1) 프레임 개체에 액세스합니다.
IE: window.frameId 또는 window.frameName을 사용하여 이 프레임 개체에 액세스합니다.
Firefox: 이 프레임 개체에 액세스하려면 window.frameName만 사용할 수 있습니다.
또한 IE와 Firefox 모두에서 window.document.getElementById("frameId")를 사용하여 이 프레임 개체에 액세스할 수 있습니다.

(2) 프레임 내용 전환:
IE와 Firefox 모두에서 window.document.getElementById("testFrame").src = "xxx.html" 또는 window.frameName.location = "xxx.html"을 사용하여 프레임 내용을 전환할 수 있습니다.

프레임의 매개변수를 상위 창으로 다시 전달해야 하는 경우 frme에서 parent를 사용하여 상위 창에 액세스할 수 있습니다. 예: parent.document.form1.filename.value="Aqing";

14.body 문제

Firefox의 본문 태그가 브라우저에서 완전히 읽혀지지 않습니다. IE의 본문은 브라우저에서 본문 태그를 완전히 읽은 후에 존재해야 합니다.
Firefox:




15 . 이벤트 위임 방법
IE: document.body.onload = inject; //inject() 함수는
Firefox: document.body.onload = inject() ;
어떤 사람들은 표준이 다음과 같다고 말합니다.
document.body.onload=new Function('inject()');


16. Firefox와 IE의 상위 요소의 차이점( parentElement)
IE: obj.parentElement
firefox: obj.parentNode
해결책: firefox와 IE 모두 DOM을 지원하므로 obj.parentNode를 사용하는 것이 좋습니다.


17.cursor:hand VS 커서:포인터
firefox는 손을 지원하지 않지만 포인터는 지원합니다
해결책: 포인터를 균일하게 사용


18 .innerText는 IE에서는 정상적으로 작동하지만 innerText는 FireFox에서 작동하지 않습니다.
해결책:
if(navigator.appName.indexOf("Explorer") > -1){

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

} else{

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

}


19. FireFox의 obj.style.height = imgObj.height와 같은 문은 유효하지 않습니다.
해결책:
obj. style.height = imgObj.height 'px';


20. IE, Firefox 및 기타 브라우저는 테이블 태그에 대해 다른 작업을 수행합니다. tr의 innerHTML 할당, js를 사용하여 tr을 추가할 때 AppendChile 메서드가 작동하지 않습니다.
해결책:
//테이블에 빈 행 추가:
var row = otable.insertRow(-1);
var cell = document.createElement("td ");
cell.innerHTML = " ";
cell.className = "XXXX";
row.appendChild(cell);


21. 패딩 문제
padding 5px 4px 3px 1px FireFox는 약어를 해석할 수 없으므로 padding-top:5px; padding-bottom:3px;


22. ul, ol 및 기타 목록의 들여쓰기를 제거하는 경우
스타일은 list-style:none;margin:0px;padding:0px;
여백 속성이 IE에 유효한 경우 패딩 속성은 FireFox


23에 유효합니다. CSS 투명성
IE: 필터: progid:DXImageTransform.Microsoft.Alpha (스타일=0, 불투명도=60).
FF:불투명도:0.6.


24. CSS 둥근 모서리
IE: 둥근 모서리는 지원되지 않습니다.
FF: -moz-border-radius:4px 또는 -moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz -국경 반경-하단 오른쪽:4px;.


25. CSS 이중선 범프 테두리
IE: 테두리:2px 오프셋;.
FF: -moz-경계-상단-색상: #d4d0c8 흰색;-moz-경계-왼쪽-색상: #d4d0c8 흰색;-moz-경계-오른쪽-색상:#404040 #808080;-moz-경계- 하단 색상:#404040 #808080;