IE 및 Firefox_javascript 기술에서 호환되는 JavaScript 작성 방법 요약

1. IE에서 입력 태그의 id 속성은 기본적으로 name 속성과 동일하지만 Firefox에서는 id 속성의 이름을 명확하게 작성해야 하며, 그렇지 않으면 id 속성을 사용할 수 없습니다.
예:
다음 코드는 IE에서는 실행할 수 있지만 Firefox에서는 실행할 수 없습니다.


다음 코드로 변경해야 합니다.

다음이 재현됩니다. 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에서는 () 또는 []를 사용하여 컬렉션 개체를 얻을 수 있습니다. .
해결책: []를 균일하게 사용하여 컬렉션 클래스 객체를 얻습니다. 3. 사용자 정의 속성 문제

설명: IE에서는 사용자 정의 속성을 얻는 방법을 사용할 수 있습니다. 또는 getAttribute()를 사용하여 사용자 정의 속성을 얻을 수 있습니다. Firefox에서는 getAttribute()만 사용하여 사용자 정의 속성을 얻을 수 있습니다.
해결책: getAttribute()를 통해 사용자 정의 속성을 가져옵니다.4. eval(" idName") 문제

설명: IE에서는 eval("idName") 또는 getElementById("idName")를 사용하여 Firefox에서 ID가 idName인 HTML 객체를 얻을 수 있습니다. getElementById("idName" )를 사용하여 ID가 ​​idName인 HTML 개체를 가져옵니다.
해결책: getElementById("idName")를 균일하게 사용하여 ID가 ​​idName인 HTML 개체를 가져옵니다.
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)"/> …


window.open("b.html","","modal=yes,width = 500,height=500,ressible=no,scrollbars=no");

9.event.x 및 event.y 문제 설명: IE에서는 짝수 개체에 x, y가 있습니다. 속성은 있지만 pageX, pageY 속성은 없습니다. Firefox에서는 짝수 객체에 pageX, pageY 속성이 있지만 x, y 속성은 없습니다.
해결책: mX(mX = event.x ? event.x : event. pageX; )를 사용하여 이벤트를 교체합니다. ;Firefox에서는 짝수 객체에 target 속성이 있지만 srcElement 속성은 없습니다.
해결책: obj(obj = event.srcElement? event.srcElement: event.target;)를 사용하여 교체합니다. IE 또는 Firefox의 event.srcElement 이벤트의 호환성 문제에도 주의하세요.
11.window.location.href 문제
참고: IE 또는 Firefox2.0의 경우 .x에서는 window.location을 사용할 수 있습니다. 또는 Firefox1.5.x에서는 window.location만 사용할 수 있습니다.
해결책: window.location.href를 사용하세요. 🎜>
12. 모달 및 비모달 창 문제 설명: IE에서는 showModalDialog 및 showModelessDialog를 통해 열 수 있지만
해결책: 사용하세요. window.open(페이지URL,이름, 매개변수)을 사용하여 새 창을 엽니다.
자식 창의 매개변수를 상위 창으로 다시 전달해야 하는 경우 하위 창에서 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가 존재해야 합니다.
15. 이벤트 위임 방법
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)
패딩 문제
패딩 5px 3px 1px FireFox는 약어를 해석할 수 없습니다.
padding-top:5px; padding-bottom:3px;
22. ul을 제거합니다. ol 등. 목록을 들여쓸 때
스타일은 다음과 같이 작성해야 합니다. list-style:none;margin:0px;padding:0px
여백 속성은 IE 및 패딩에 유효합니다. 속성은 FireFox
에 유효합니다. 23. CSS 투명성
IE: filter: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 .
xmlhttp.open("GET",url,true)
xmlhttp.send(null)
}
//ie
else if (window.ActiveXObject) // IE용 코드
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
if (xmlhttp)
{
xmlhttp
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)
.hasChildNodes()) //원래 콘텐츠를 지우고 새 콘텐츠 추가
el.removeChild(el.lastChild)
el.appendChild(htmlFrag)
29. 🎜> IE에서는
을 사용하여 이미지를 새로 고칠 수 있지만 FireFox에서는 그렇지 않습니다. 주로 캐싱 문제인데, 주소 뒤에 임의의 숫자를 추가하면 해결될 수 있습니다. onclick 이벤트 코드를 다음과 같이 편집합니다: "this.src=this.src '?' Math.random()"