일부 Javascript IE 및 Firefox 호환성 문제와 일반적인 예제_javascript 기술 요약

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")를 사용하여 idName의 HTML 객체를 얻을 수 있습니다. Firefox에서는 getElementById("idName")만 사용할 수 있습니다. idName이 있는 HTML 개체를 가져옵니다.
해결 방법: idName이 있는 HTML 개체를 가져오려면 getElementById("idName")를 사용하세요.

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

설명: IE의 input.type 속성은 읽기 전용입니다. Firefox에서 읽기 및 쓰기용.
8.window.event 문제
설명: window.event는 IE에서만 실행할 수 있지만 Firefox의 이벤트는 실행할 수만 있기 때문입니다. 이벤트가 발생하는 현장에서 사용됨에서 Firefox는 매개변수 전달을 위해 소스에서 이벤트를 추가해야 합니다. 즉, 이 매개변수를 무시하고 window.event를 사용하여 이벤트를 읽습니다.
해결책: IE&Firefox: Submitted(event)"/> …



9.event.x 및 event.y 문제

참고 : IE에서는 짝수 개체에 x, y 속성이 있지만 pageX, pageY 속성은 없습니다. Firefox에서는 짝수 개체에 pageX, pageY 속성이 있지만 x, y 속성은 없습니다. 해결책: mX(mX = 이벤트)를 사용하세요. .x ? event.x : event.pageX;) IE의 event.x 또는 Firefox의 event.pageX
10.event.srcElement 문제

설명: IE에서는 이벤트 객체에는 srcElement 속성이 있지만 대상 속성은 없습니다. Firefox에서는 짝수 객체에 대상 속성이 있지만 srcElement 속성이 없습니다. 해결책: obj를 사용하세요(obj = event.srcElement ? event.srcElement : event). .target;) IE의 event.srcElement 또는 Firefox의 event.target을 바꾸려면 이벤트
11.window.location.href 문제

의 호환성 문제에도 주의하세요. IE 또는 Firefox2.0.x에서는 window.location 또는 window.location.href를 사용할 수 있습니다. Firefox 1.5.x에서는 window.location만 사용할 수 있습니다. 해결책: window.location 대신 window.location을 사용하세요. .href.
12. 모달 및 비모달 창 문제

설명: IE에서는 showModalDialog 및 showModelessDialog를 통해 열 수 있습니다. . 해결 방법: window.open(pageURL, 이름, 매개변수)을 직접 사용하여 새 창 열기 하위 창의 매개변수를 상위 창으로 다시 전달해야 하는 경우 window.opener를 사용할 수 있습니다. 예: var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";

13.Frame 문제

다음 프레임을 예로 들어 보겠습니다.
(1) 액세스 프레임 개체:
IE: window.frameId 또는 window.frameName을 사용하여 이 프레임 개체에 액세스합니다. 같은 이름을 가질 수 있습니다. Firefox: window.frameName을 사용하여 이 프레임 개체에 액세스할 수 있습니다.
또한 window.document.getElementById("frameId")를 사용하여 IE와 Firefox 모두에서 이 프레임 개체에 액세스할 수 있습니다.
( 2) 프레임 내용 전환:
window.document.getElementById("testFrame").src = "xxx.html" 또는 window.frameName.location = "xxx.html"을 사용하여 두 IE 모두에서 프레임을 전환할 수 있습니다.
프레임의 매개변수를 상위 창으로 다시 전달해야 하는 경우(오프너가 아니라 상위 프레임임을 참고) frme에서 상위를 사용하여 상위 창에 액세스할 수 있습니다.예: parent.document.form1.filename.value="Aqing";
14.body 문제
Firefox의 본문은 브라우저에서 본문 태그를 완전히 읽기 전에 존재합니다. 브라우저에서 body 태그를 완전히 읽은 후에 IE가 존재해야 합니다.
IE: document.body.onload = inject( )가 수행되었습니다. Firefox 이전에 구현됨: document.body.onload = inject();

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

17.cursor:hand VS 커서:포인터
Firefox는 손을 지원하지 않지만 IE는 포인터를 지원합니다 해결 방법: 포인터를 균일하게 사용하세요

18. innerText는 IE에서 정상적으로 작동하지만, FireFox에서는 innerText가 작동하지 않습니다.
해결책: if(navigator.appName.indexOf("Explorer") > -1){
document.getElementById('element').innerText = "내 텍스트"
} else{
document.getElementById('element').textContent = "my text";
}

19. FireFox에서 HTML 태그의 스타일을 설정할 때 모든 위치와 글꼴 크기는 값 뒤에는 px가 와야 합니다. 즉, 이것도 지원됩니다.
20. IE, Firefox 및 기타 브라우저는 테이블 태그에 대해 다른 작업을 수행합니다. IE에서는 tr을 추가하기 위해 js를 사용할 때 innerHTML 할당이 허용되지 않습니다. 작동하지 않습니다.
해결책: //테이블에 빈 행 추가:
var row = otable.insertRow(-1)
var cell = document.createElement("td");
cell.innerHTML = " ";
cell.className = "XXXX";
row.appendChild(cell)

패딩 문제
3px 1px FireFox는 약어를 해석할 수 없습니다.
padding-top:5px; padding-bottom:3px;
22. ul을 제거합니다. ol 등. 목록을 들여쓸 때 스타일은 다음과 같이 작성해야 합니다. list-style:none;margin:0px;padding:0px;
여기서 margin 속성은 IE에 유효하고 padding 속성은 FireFox에 유효합니다. 23. CSS 투명성

IE: 필터:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=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; 26. 선택

의 옵션 컬렉션에 대한 작업 [] 외에도 열거된 요소에 SelectName.options.item()을 사용할 수 있습니다. 또한 SelectName .options.length, SelectName.options.add/remove는 모두 두 브라우저 모두에서 작동합니다. 추가 후 요소 할당에 주의하세요. 그렇지 않으면 실패할 것입니다(이것이 제가 테스트한 것입니다).
27. XMLHTTP의 차이점
//mf
if (window.XMLHttpRequest) //mf { xmlhttp=new XMLHttpRequest()
xmlhttp . onreadystatechange=xmlhttpChange
xmlhttp.open("GET",url,true)
xmlhttp.send(null)
}
//ie
else if (window.ActiveXObject) // IE용 코드
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
if (xmlhttp)
{
xmlhttp.onreadystatechange=xmlhttpChange
xmlhttp.open("GET" , url,true)
xmlhttp.send()
}
}
}

28.innerHTML의 차이점

Firefox는 innerHTML을 지원하지 않습니다. 해결책은 다음과 같습니다.
rng = document.createRange(); el = document.getElementById(elementid); rng.setStartBefore(el)
htmlFrag = rng.createContextualFragment(content);
while ( el.hasChildNodes()) //원본 콘텐츠를 지우고 새 콘텐츠 추가
el.removeChild(el.lastChild)
el.appendChild(htmlFrag);