Firefox 및 IE 호환성 문제 및 Solutions_javascript 기술 요약

다국어 Java 웹사이트를 개발하는 과정에서 FF에서는 정상적으로 실행되지만 IE에서는 실행되지 않거나, 그 반대의 경우도 정상적으로 실행되는 코드를 많이 발견했습니다. JavaScript에서 IE와 Firefox(Firefox) 간의 비호환성 및 통합 방법은 다음과 같습니다.

1. Firefox의 externalHTML과 호환되며, FF에는 externalHtml 메서드가 없습니다.

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

if (window.HTMLElement) {
HTMLElement.prototype. __defineSetter__("outerHTML" ,function(sHTML) {
var r=this.ownerDocument.createRange();
r.setStartBefore(this);
var df=r.createContextualFragment(sHTML);
this.parentNode.replaceChild(df,this);
return sHTML;
});

HTMLElement.prototype.__defineGetter__("outerHTML",function() {
var attr;
var attrs =this.attributes;
var str="for (var i=0;i";
return str ">" this.innerHTML ""
})

HTMLElement.prototype.__defineGetter__(" canHaveChildren",function( ) {
switch(this.tagName.toLowerCase()) {
case "area": ​​​​
case "base":
case "basefont":
case "col":
case "frame":
case "hr":
case "img":
case "br":
case "input":
case " isindex":
case "link":
case "meta":
case "param":
return false;
}
return true;
});
}

2. 컬렉션 클래스 개체 문제

설명: IE에서는 () 또는 []를 사용하여 컬렉션 클래스 개체를 얻을 수 있지만, Firefox에서는 []만 사용할 수 있습니다. .해결 방법: 컬렉션 개체를 얻으려면 []를 균일하게 사용하세요.

3. 사용자 정의 속성 문제

설명: IE에서는 다음 메서드를 사용할 수 있습니다. 일반 속성을 얻으려면 getAttribute()를 사용하여 사용자 정의 속성을 얻을 수도 있습니다. Firefox에서는 getAttribute()만 사용하여 사용자 정의 속성을 얻을 수 있습니다.

4.eval("idName") 문제

설명: IE에서는 eval("idName") 또는 getElementById("idName")를 사용하여 HTML을 얻을 수 있습니다. ID가 idName인 객체; Firefox에서는 ID가 idName인 HTML 객체를 얻으려면 getElementById("idName")만 사용할 수 있습니다. 해결 방법: ID가 idName인 HTML 객체를 얻으려면 getElementById("idName")를 균일하게 사용하십시오. .

5 .변수 이름이 HTML 개체의 ID와 동일한 문제

설명: IE에서는 HTML 개체의 ID가 다음과 같을 수 있습니다. 문서의 하위 개체의 변수 이름으로 직접 사용되며 Firefox에서는 사용할 수 없습니다. 변수 이름은 HTML 개체 ID와 동일하며 IE에서는 사용할 수 없습니다. 해결책: document.idName 대신 document.getElementById("idName")를 사용하십시오. 변수를 선언할 때 오류를 줄이기 위해 동일한 HTML 객체 ID를 가진 변수 이름을 사용하지 않는 것이 가장 좋습니다.

6.const 문제

설명: Firefox에서는 const 키워드 또는 var 키워드를 사용하여 IE에서 상수를 정의할 수 있지만 var 키워드만 사용하여 상수를 정의할 수 있습니다. 해결 방법: var 키워드를 균일하게 사용하여 상수를 정의하세요.

7.input.type 속성 문제

설명: IE에서는 input.type 속성이 읽기 전용입니다. ; 그러나 Firefox의 input.type 속성은

8.window.event 문제

설명: window.event는 IE에서만 실행할 수 있습니다. Firefox Firefox의 이벤트는 이벤트가 발생한 사이트에서만 사용할 수 있기 때문입니다. 해결책:

IE:

...
<script> <BR>function gotoSubmit8_1() { <BR>... <BR>경고( 창 .event); //window.event 사용 <BR>... <BR>} <BR></script>
IE&Firefox:

...
<script> <BR>함수 gotoSubmit8_2(evt)>. . <BR>evt=evt?evt:(window.event?window.event:null) <BR>alert(evt); //evt 사용 <BR>} <BR>< script> <BR><BR><br>9.event.x 및 event.y 문제 <br> <STRONG>설명: IE에서 짝수 개체에는 x, y 속성이 있지만 pageX, pageY 속성은 없습니다. ;Firefox에서는 짝수 개체에 pageX, pageY 속성이 있지만 x, y 속성은 없습니다. 해결 방법: IE 이벤트에서 event.x 또는 Firefox를 바꾸려면 mX(mX = event.x? event.x: event.pageX;)를 사용하세요. .page 객체에 target 속성이 있지만 srcElement 속성이 없습니다. 해결 방법: IE에서는 event.srcElement 대신에 obj(obj = event.srcElement ? event.srcElement : event.target;)를 사용하고, Firefox에서는 event.target을 사용하세요. > <br><br>11.window.location.href 문제<br> <br><STRONG>설명: IE 또는 Firefox2.0.x에서는 window.location 또는 window.location.href1을 사용할 수 있습니다. 5. 참고: IE에서는 showModalDialog 및 showModelessDialog를 통해 모달 및 비모달 창을 열 수 있지만 Firefox에서는 열 수 없습니다. 해결 방법: window.open(pageURL, 이름, 매개변수)을 직접 사용하여 새 창을 엽니다. <br><br>하위 창의 매개변수를 상위 창으로 다시 전달해야 하는 경우 하위 창에서 window.opener를 사용하여 상위 창에 액세스할 수 있습니다. 예: var parWin = window.opener; document.getElementById("Aqing ").value = "Aqing"; <br><br><STRONG>13.frame 문제 <br><br>다음 프레임을 예로 들어 보겠습니다. <br><br><frame src=" xxx.html" id="frameId" name="frameName" /> <STRONG>(1) 프레임 개체에 액세스합니다. IE: window.frameId 또는 window.frameName을 사용하여 액세스합니다. Firefox: 이 프레임 개체에 액세스하려면 window.frameName만 사용하세요. 또한 IE와 Firefox 모두에서 이 프레임 개체에 액세스하려면 window.document.getElementById("frameId")를 사용할 수 있습니다. (2) 프레임 내용 전환: IE와 Firefox 모두에서 window.document.getElementById("testFrame").src = "xxx.html" 또는 window.frameName.location = "xxx.html"을 사용하여 전환할 수 있습니다. <br><br>프레임의 매개변수를 상위 창으로 다시 전달해야 하는 경우 frme에서 상위 창에 액세스할 수 있습니다.예: parent.document.form1.filename.value="Aqing"; <br><br><STRONG>14. 문제를 찾습니다 <br><br>다음 getElementByClass를 예로 들어 보겠습니다. ><br>document.getElementByClass("classname1"); 이 함수는 IE에서 작동하지 않습니다. 대신 <br><br>getElementsByClassName을 사용할 수 있지만 이 함수는 다음과 같은 단일 객체 대신 일치하는 NodeList를 반환합니다. 🎜> <br><BR><div class="codetitle"><span>코드 복사<a style="CURSOR: pointer" data="1898" class="copybut" id="copybut1898" onclick="doCopy('code1898')"><U> 코드는 다음과 같습니다. var list, index <div class="codebody" id="code1898">list; document.getElementsByClassName(" classname1"); <BR>for (index = 0; index < list.length; index) { <BR>list[index].setAttribute(/* ... */); } <BR><BR> <BR>이와 같은 문제는 모든 브라우저와 호환되는 jQuery, Prototype, Google Closure 등과 같은 라이브러리를 사용하는 것이 가장 좋습니다. 그러면 처리 시간이 많이 절약됩니다. 이러한 호환성 문제. <BR>예를 들어 jQuery에서는 다음과 같습니다. <BR><br>$(".home1").attr(/* ... */) <br><br><br>15.body 질문 <br> <br><STRONG>Firefox의 본문은 브라우저에서 본문 태그를 완전히 읽은 후에 존재해야 하며, IE의 본문은 브라우저에서 본문 태그를 완전히 읽은 후에 존재해야 합니다. <br>예: <br><br>Firefox: <br><br><br><BR><div class="codetitle">코드 복사 <span><a style="CURSOR: pointer" data="79872" class="copybut" id="copybut79872" onclick="doCopy('code79872')"><U> 코드는 다음과 같습니다. &lt ;body > <script type="text/javascript"> <div class="codebody" id="code79872">document.body.onclick = function(evt){ <BR>evt = evt || window.event; ; <BR>} <BR></script>