IE, FF 호환 js 스크립트 코드 요약(자주 사용)_javascript 스킬

/*다음에서는 Internet Explorer 대신 IE를 사용하고, Mozzila Firefox 대신 MF/FF를 사용합니다. */

//window.event
IE: window.event 객체가 있습니다
FF: window.event 개체가 없습니다. 이벤트 객체는 함수에 인수로 전달될 수 있습니다. 예: onmousemove=doMouseMove(event)
해결책: var event = event || window.event
예:

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

<script> <BR>function test(event) { <BR>var event = event || window.event; 뭔가를 하세요 <BR>} <BR></script>

//현재 마우스 좌표
IE: event.x 및 event.y.
FF: event.pageX 및 event.pageY.
공통: 둘 다 event.clientX 및 event.clientY 속성을 가지고 있습니다.

//마우스의 현재 좌표(스크롤 막대가 굴러간 거리와 함께)
IE: event.offsetX 및 event.offsetY.
FF: event.layerX 및 event.layerY.
해결책:

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

<script> <BR>function test(event) { <BR>var event = event || window.event <BR>//또는 var event = event : window.event;//둘 중 하나를 사용할 수 있습니다. if else(이 약어)를 사용할 수 있습니다. <BR>var x = event.offsetX || event.layerX; var y = event.offsetY || event.layerY <BR>//do Something <BR>< /script> <BR><div onmousedown="test(event)"></script>

/**다른 호환 솔루션도 비슷하므로 하나씩 예시를 들진 않겠습니다**/

//event.srcElement 문제
설명: IE에서는 이벤트 객체에 srcElement 속성이 있지만 Firefox에서는 짝수 객체인 target 속성이 없습니다.
대상 속성이 있지만 srcElement 속성이 없습니다.
해결 방법: obj(obj = event.srcElement ? event.srcElement : event.target;)
를 사용하여 IE에서 event.srcElement를 바꾸거나
Firefox event.target 아래에서 이벤트의 호환성 문제에도 주의하세요.

//event.toElement 문제
문제:
IE에서는 짝수 개체에 srcElement 속성이 있지만 대상 속성은 없습니다.
Firefox에서는 짝수 개체에 대상 속성이 있습니다. 그러나 srcElement 속성은 없습니다
해결책:
var target = e.관련Target || e.toElement;

//라벨의 x 및 y 좌표 위치: style.posLeft 및 style.posTop 🎜>IE: 있어요.
FF: 아니요.
공통: object.offsetLeft 및 object.offsetTop.

//양식의 높이와 너비
IE: document.body.offsetWidth 및 document.body.offsetHeight. 참고: 현재 페이지에는 body 태그가 있어야 합니다.
FF: window.innerWidth 및 window.innerHegiht,
및 document.documentElement.clientWidth 및 document.documentElement.clientHeight.
공통: document.body.clientWidth 및 document.body.clientHeight.

//이벤트 추가
IE: element.attachEvent("onclick", function);.
FF: element.addEventListener("클릭", 함수, true).
일반: element.onclick=function. onclick 이벤트를 사용할 수도 있지만 onclick과 위의 두 메소드는 효과가 다릅니다.
onclick은 하나의 프로세스만 실행하는 반면, attachmentEvent와 addEventListener는 프로세스 목록, 즉 여러 프로세스를 실행합니다.
예: element.attachEvent("onclick", func1);
element.attachEvent("onclick", func2) 그러면 func1과 func2가 모두 실행됩니다.

//태그의 사용자 정의 속성
IE: 태그 div1에 대해 속성 값이 정의된 경우 해당 값은 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["elementName"]

//컬렉션/배열 객체 문제
(1) 기존 문제:
기존 코드에 많은 컬렉션 객체 사용 () 검색할 때 IE는 이를 허용하지만 MF는 허용하지 않습니다.
(2) 해결 방법:
아래 첨자 연산으로 []를 대신 사용하세요. 예: document.forms("formName")는 document.forms["formName"]으로 변경됩니다.
또 다른 예: document.getElementsByName("inputName")(1)이 document.getElementsByName("inputName")[1]으로 변경되었습니다.

//HTML 객체의 ID를 객체명
(1) 기존 이슈
IE에서는 HTML 객체의 ID를 문서의 하위 객체의 변수명으로 바로 사용할 수 있다. MF에는 없습니다.
(2) 해결 방법
객체 변수로 idName 대신 getElementById("idName") 사용

//idName 문자열을 사용하여 객체를 얻는 문제
(1) 기존 문제
IE에서는 eval(idName)을 사용하여 ID가 ​​idName인 HTML 개체를 가져올 수 있지만 MF에서는 가져올 수 없습니다.
(2) 해결책
eval(idName) 대신 getElementById(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과 호환되지만 경고가 생성됩니다.
대신 getElementById("*")
또는 getElementByTagName("*")을 사용할 수 있습니다. 그러나 document.all.length와 같은 속성의 경우 완전히 호환되지 않습니다

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

//window.location.href 문제
설명: IE 또는 Firefox2.0에서는 window.location 또는 Firefox 1.5.x에서는 window.location.href를 사용할 수 있습니다.
window.location만 사용할 수 있습니다.
해결 방법: 대신 window.location을 사용하세요. window.location.href

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

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

(1) 프레임 개체에 액세스합니다.
IE: 이 프레임 개체에 액세스하려면 window.frameId 또는 window.frameName을 사용합니다. 및 FrameName은 동일한 이름을 가질 수 있습니다.
FF: 이 프레임 개체는 window.frameName을 통해서만 액세스할 수 있습니다.
또한 IE 및 Firefox에서는 window.document.getElementById("frameId")를 사용하여 이 프레임 개체에 액세스할 수 있습니다
( 2) 프레임 콘텐츠 전환:
IE와 Firefox 모두에서 window.document.getElementById("testFrame").src = "xxx.html"
또는 window.frameName.location = "xxx.html"을 사용할 수 있습니다. 프레임의 내용을 전환하려면
프레임의 매개변수를 상위 창으로 다시 전달해야 하는 경우(오프너가 아니라 상위 프레임임에 유의) frme에서 상위를 사용하여 액세스할 수 있습니다. 부모 창.
예: window.parent.document.form1.filename.value="Aqing";

//body 문제
브라우저에서 body 태그를 완전히 읽기 전에 Firefox의 본문이 존재합니다. IE의 body는 브라우저가 body 태그를 완전히 읽은 후에 존재해야 합니다

//이벤트 위임 방법
IE: document.body.onload = inject; //함수 inject()가 구현되었습니다. before
FF: document.body.onload = inject();

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

//innerText는 IE에서 정상적으로 작동하지만, textContent
//는 FireFox에서 HTML 태그의 스타일을 설정하는 데 사용되며 모든 위치 및 글꼴 크기 값 뒤에는 px가 와야 합니다. 이 IE는

//상위 노드, 하위 노드 및 삭제 노드
IE: parentElement, parement.children, element.romoveNode(true)도 지원됩니다.
FF: parentNode, parentNode.childNodes, node.parentNode.removeChild(노드).

//select
의 옵션 세트에 대한 작업 [] 외에도 SelectName.options.item()도 열거 요소에 사용할 수 있습니다. SelectName.options 추가/제거는 두 브라우저 모두에서 작동합니다.
추가 후 요소를 할당할 때 주의하세요.
선택 항목에서 모든 옵션을 동적으로 삭제합니다.
document.getElementById("ddlResourceType").options.length=0
동적으로 삭제 선택의 모든 옵션 특정 항목 옵션:
document.getElementById("ddlResourceType").options.remove(indx);
선택에 항목 옵션을 동적으로 추가:
document.getElementById("ddlResourceType ").options.add (new Option(text,value));
IE FF 동적 삭제 일반 방법:
document.getElementById("ddlResourceType").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)
}



//웹 콘텐츠 선택 금지

문제:
CSS, IE에서는 FF를 금지해야 합니다. JS에서는 금지되어야 합니다
해결책:
IE: obj.onselectstart = function() {return false;}
FF: -moz-user-select:none; >//그리기
IE: VML.
FF: SVG.

//CSS: 투명
IE: 필터:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60).
FF:불투명도:0.6.

//CSS: 둥근 모서리
IE: 둥근 모서리는 지원되지 않습니다.
FF: -moz-border-radius:4px 또는 -moz-border-radius-topleft:4px
-moz-border-radius-bottomleft:4px; ;-moz-border-radius-bottomright:4px;.

//CSS: 이중선 범프 테두리
IE: border:2px outset;.
FF:-moz- 경계-상단-색상: #d4d0c8 흰색;-moz-경계-왼쪽-색상: #d4d0c8 흰색
-moz-border-right-colors:#404040 #808080;-moz -테두리 하단 색상:#404040 #808080;.