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 예:

코드 복사 코드는 다음과 같습니다. function test(event) { var event = event || window.event; 뭔가를 하세요 }

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

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

코드 복사 코드는 다음과 같습니다. function test(event) { var event = event || window.event //또는 var event = event : window.event;//둘 중 하나를 사용할 수 있습니다. if else(이 약어)를 사용할 수 있습니다. var x = event.offsetX || event.layerX; var y = event.offsetY || event.layerY //do Something /**다른 호환 솔루션도 비슷하므로 하나씩 예시를 들진 않겠습니다**/

//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;.