IE 와 FF 를 호 환 하 는 js 스 크 립 트 코드 소결(자주 사용)

/*다음은 Internet Explorer 대신 IE,Mozilla Firefox 대신 MF/FF*//windows.event IE:window.event 대상 FF:window.event 대상 이 없습니다.함수 에 대한 매개 변 수 를 통 해 이벤트 대상 을 전달 할 수 있 습 니 다.예 를 들 어 onmousemove=doMouse Move(event)해결 방법:var event=event||window.event;example:

 
<script> 
function test(event) { 
var event = event || window.event; 
//do Something 
} 
</script> 
<input type="button" value="click" onclick="test(event)"/> 

//마우스 현재 좌표 IE:event.x 와 event.y.FF:event.pageX 와 event.pageY.공통:둘 다 이벤트.clientX 와 이벤트.clientY 속성 이 있 습 니 다./마우스 현재 좌표(스크롤 바 가 굴 러 간 거리 추가)IE:event.offsetX 와 event.offsetY.FF:event.layerX 와 event.layerY.해결 방법:

 
<script> 
function test(event) { 
var event = event || window.event; 
//or var event = event ? event : window.event;// 2    ，    if else（   ） 
var x = event.offsetX || event.layerX; 
var y = event.offsetY || event.layerY; 
//do Something 
} 
</script> 
<div onmousedown="test(event)"></div> 

/*다른 호 환 해결 방법 은 유사 합 니 다.더 이상 예 를 들 지 않 습 니 다**//event.srcElement 문제 설명:IE 에서 이벤트 대상 은 srcElement 속성 이 있 지만 target 속성 이 없습니다.Firefox 에서 even 대상 은 target 속성 이 있 지만 srcElement 속성 이 없습니다.해결 방법:obj(obj=event.srcElement 를 사용 하 시 겠 습 니까?event.srcElement : event.target;) IE 의 event.srcElement 나 Firefox 의 event.target 을 대체 합 니 다.event 의 호환성 문 제 를 동시에 주의 하 십시오./이벤트.toElement 문제:IE 에서 even 대상 은 srcElement 속성 이 있 지만 target 속성 이 없습니다.Firefox 에서 even 대상 은 target 속성 이 있 지만 srcElement 속성 해결 방법 이 없습니다:var target=e.relatedTarget||e.toElement;/탭 의 x 와 y 의 좌표 위치:style.posLeft 와 style.posTop IE:있 습 니 다.FF:없습니다.공통:object.offset Left 와 object.offset Top./창의 높이 와 너비 IE:document.body.of set Width 와 document.body.of set Height.메모:이 페이지 에는 바디 태그 가 있어 야 합 니 다.FF:window.inner Width 와 window.inner Hegiht,그리고 document.document Element.client Width 와 document.document Element.client Height.공통:document.body.client Width 와 document.body.client Height./이벤트 IE:element.attachEvent("onclick",function)를 추가 합 니 다.FF：element.addEventListener("click", function, true)。 통용:element.onclick=function.모두 onclick 이 벤트 를 사용 할 수 있 지만 onclick 과 위의 두 가지 방법의 효 과 는 다 릅 니 다.onclick 은 하나의 과정 만 수행 할 수 있 고 attachEvent 와 addEventListener 는 하나의 과정 목록,즉 여러 과정 을 수행 합 니 다.예 를 들 어 element.attachEvent("onclick",func 1);element.attachEvent("onclick",func 2)는 func 1 과 func 2 가 모두 실 행 됩 니 다./탭 의 사용자 정의 속성 IE:탭 div 1 에 속성 value 를 정의 하면 div1.value 와 div1[value]에서 이 값 을 얻 을 수 있 습 니 다.FF:div1.value 와 div1[value]로 가 져 갈 수 없습니다.공통:div1.getAttribute("value")./document.form.item 문제 IE:기 존 문제:기 존 코드 에 document.formName.item("itemName")과 같은 문구 가 많이 존재 합 니 다.MF 에서 FF/IE 를 실행 할 수 없습니다.document.formName.elements["element Name"]//집합/배열 대상 문제(1)기 존 문제:기 존 코드 에서 많은 집합 대상 을 사용 할 때(),IE 는 받 아들 일 수 있 고 MF 는 받 아들 일 수 없습니다.(2)해결 방법:[]을 아래 표 로 바 꾸 어 연산 한다.예 를 들 어 document.forms("formName")를 document.forms["formName"]로 바 꿉 니 다.예 를 들 어 document.getElementsByName("input Name")(1)을 document.getElementsByName("input Name")[1]//HTML 대상 의 id 를 대상 이름 으로 하 는 문제(1)기 존 문 제 는 IE 에서 HTML 대상 의 ID 를 document 의 부하 대상 변수 이름 으로 직접 사용 할 수 있 습 니 다.MF 에 서 는 안 됩 니 다.2)해결 방법 은 idName 대신 getElement ById("idName")를 대상 변수 로 사용//idName 문자열 로 대상 을 가 져 오 는 문제(1)기 존 문 제 는 IE 에서 eval(idName)을 이용 하여 id 가 idName 인 HTML 대상 을 가 져 올 수 있 으 며 MF 에 서 는 안 됩 니 다.(2)해결 방법 은 eval(idName)대신 getElement ById(idName)를 사용 합 니 다.//변수 명 이 특정한 HTML 대상 id 와 같은 문제(1)기 존 문 제 는 MF 에 있 습 니 다.대상 id 가 HTML 대상 의 이름 이 아니 기 때문에 HTML 대상 id 와 같은 변수 명 을 사용 할 수 있 습 니 다.IE 에 서 는 안 됩 니 다.(2)해결 방법 은 변 수 를 설명 할 때 일률적으로 var 를 추가 하여 잘못된 의 미 를 피하 고 IE 에서 도 정상적으로 작 동 할 수 있다.또한 HTML 대상 id 와 같은 변수 이름 을 가 져 오지 않 고 오 류 를 줄 이 는 것 이 좋 습 니 다./document.getElementsByName()과 document.all[name]의 질문 은 현재 문제 입 니 다.IE 에서 getElementsByName(),document.all[name]은 div 요 소 를 가 져 올 수 없습니다.document.all Firefox 는 document.all 을 호 환 할 수 있 지만 경고 가 생 성 됩 니 다.getElement ById("*")나 getElement ByTagName("*")으로 대체 할 수 있 지만 document.all.length 등 속성 에 대해 서 는 전혀 호 환 되 지 않 습 니 다./input.type 속성 문제 설명:IE 에서 input.type 속성 은 읽 기 전용 입 니 다.그러나 Firefox 에서 input.type 속성 은 읽 기와 쓰기//windows.location.href 문제 설명:IE 또는 Firefox 2.0.x 에서 window.location 또는 window.location.href 를 사용 할 수 있 습 니 다.Firefox 1.5.x 에 서 는 window.location 해결 방법 만 사용 할 수 있 습 니 다.window.location 을 사용 하여 window.location.href//모드 와 비 모드 창 문 제 를 설명 합 니 다.IE 에 서 는 showModal Dialog 와 showModelessDialog 를 통 해 모드 와 비 모드 창 을 열 수 있 습 니 다.Firefox 에 서 는 해결 방법 이 없습니다.window.open(pageURL,name,parameters)방식 으로 새 창 을 엽 니 다.하위 창의 인 자 를 부모 창 으로 전달 하려 면 하위 창 에서 window.opener 를 사용 하여 부모 창 에 접근 할 수 있 습 니 다.예 를 들 어 var parWin=window.opener;parWin.document.getElementById("Aqing").value = "Aqing"; //frame 문 제 는 아래 frame 을 예 로 들 면(1)frame 대상 에 접근:IE:window.frameId 또는 window.frameName 을 사용 하여 이 frame 대상 에 접근 합 니 다.frameId 와 frameName 은 같은 이름 으로 사용 할 수 있 습 니 다.FF:이 frame 대상 에 window.frameName 만 접근 할 수 있 습 니 다.또한,IE 와 Firefox 에 서 는 window.document.getElement ById("frameId")를 사용 하여 이 frame 대상 을 방문 할 수 있 습 니 다.(2)frame 내용 전환:IE 와 Firefox 에 서 는 window.document.getElement ById("testframe")를 사용 할 수 있 습 니 다.src="xxx.html"또는 window.frame Name.location="xxx.html"를 사용 하여 frame 의 내용 을 전환 할 수 있 습 니 다.frame 의 매개 변 수 를 부모 창 으로 전송 하려 면(opene 가 아 닌 것 을 주의 하 십시오.r.parent frame)는 frme 에서 parent 를 사용 하여 부모 창 에 접근 할 수 있 습 니 다.예 를 들 어 window.parent.document.form1.filename.value="Aqing";/body 문제 Firefox 의 body 는 body 태그 가 브 라 우 저 에 완전히 읽 히 기 전에 존재 합 니 다.IE 의 body 는 body 태그 가 브 라 우 저 에 의 해 완전히 읽 힌 후에 야//이벤트 의뢰 방법 IE:document.body.onload=inject 가 존재 합 니 다./Function inject()는 그 전에 FF:document.body.onload=inject();/Firefox 와 IE 의 부모 요소(parentElement)의 차이 IE:obj.parentElement FF:obj.parentNode 해결 방법:FF 와 IE 가 DOM 을 지원 하기 때문에 obj.parentNode 를 사용 하 는 것 이 좋 습 니 다./innerText 는 IE 에서 정상적으로 작 동 하지만 innerText 는 Firefox 에 서 는 안 됩 니 다.textContent//FireFox 에 HTML 탭 을 설정 하 는 style 을 사용 해 야 할 때,모든 위치 성과 글꼴 크기 의 값 은 px 를 따라 야 합 니 다.이 ie 도 지원 하 는//부모 노드,하위 노드 와 삭제 노드 IE:parentElement,parement.children,element.romoveNode(true)입 니 다.FF：parentNode、parentNode.childNodes，node.parentNode.removeChild(node)。 //select 의 options 집합 작업 에 대한 매 거 진 요 소 는[]를 제외 하고 selectName.options.item()도 가능 합 니 다.또한 selectName.options.length,SelectName.options.add/remove 는 두 가지 브 라 우 저 에서 사용 할 수 있 습 니 다.add 후 할당 요 소 를 주의 하 십시오.그렇지 않 으 면 selection 의 모든 options:document.getElement ById("ddl Resource Type").options.length=0 을 동적 으로 삭제 하 는 데 실패 합 니 다.selection 의 한 옵션 을 동적 으로 삭제 합 니 다:document.getElement ById("ddlResource Type").options.remove(indx);select 에 있 는 옵션 을 동적 으로 추가 합 니 다:document.getElement ById("ddlResourceType").options.add(new Option(text,value);IE FF 동적 삭제 일반적인 방법:document.getElement ById("ddlResource Type").options[indx]=null;/캡 처 이벤트 문제:FF 에는 setCapture(),releaseCapture()방법 이 없습니다.해결 방법:IE:

 
obj.setCapture(); 
obj.releaseCapture(); 

FF:

 
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); 
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP); 
if (!window.captureEvents) { 
o.setCapture(); 
}else { 
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); 
} 
if (!window.captureEvents) { 
o.releaseCapture(); 
}else { 
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP); 
} 

//웹 페이지 내용 선택 금지 문제:FF 는 CSS 로 금지 하고 IE 는 JS 로 해결 방법 을 금지 합 니 다:IE:obj.onselectstart=function(){return false;}FF: -moz-user-select:none; //그림 IE:VML.FF：SVG。 //CSS:투명 IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60).FF：opacity:0.6。 //CSS:원 각 IE:원 각 은 지원 되 지 않 습 니 다.FF:-moz-border-radius:4px 또는-moz-border-radius-topleft:4px;-moz-border-radius-topright:4px; -moz-border-radius-bottomleft:4px;-moz-border-radius- bottomright:4px;。 //CSS:2 선 요철 테두리 IE:border:2px outset;.FF：-moz- border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white; -moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;。