1. 요소 검색 문제
1. Document.all [이름]
(1) 기존 문제 : Firefox는 문서를 지원하지 않습니다.
(2) 해결책 : GetElementsByName (이름), getElementById (ID) 등을 사용하여 대체하십시오.
2. 수집 객체 문제
(1) 기존 문제 : IE는 많은 컬렉션 클래스 객체를 사용할 때 ()를 사용할 수 있지만 Firefox에서는 [] 만 사용할 수 있습니다.
예를 들어 : IE에서는 document.forms ( "formname")를 사용하여 "formname"이라는 형식을 반환 할 수 있지만 Firefox에서는 작동하지 않습니다.
(2) 해결책 : 사용 [], 위의 예에서는 document.forms [ "formname"]로 변경할 수 있습니다.
3. HTML 요소의 ID는 JavaScript에서 표시됩니다.
(1) 기존 문제 : IE의 HTML 요소의 ID는 문서의 하위 객체의 변수 이름으로 직접 사용할 수 있습니다. Firefox에서는 사용할 수 없습니다.
(2) 솔루션 : idname 대신 개체 변수로 getElementByid ( "idname")를 사용하십시오.
4. 평가 (idname) 객체를 가져옵니다
(1) 기존 문제 : 즉, eval (idname)을 사용하면 id idname이있는 HTML 객체를 얻을 수 있지만 Firefox에서는 사용할 수 없습니다.
(2) 해결책 : Eval (idname) 대신 getElementByid (idname)를 사용하십시오.
5. 변수 이름은 HTML 객체 ID와 동일합니다.
(1) 기존 문제 : Firefox에서 객체 ID가 HTML 객체의 이름이 아니기 때문에 html 객체 ID와 동일한 변수 이름을 사용할 수 있으며 IE에서 사용할 수 없습니다.
(2) 해결책 : 변수를 선언 할 때는 모호성을 피하기 위해 VAR을 추가하여 IE에서 정상적으로 실행할 수 있도록하십시오. 또한 오류를 줄이기 위해 HTML 객체 ID와 동일한 변수 이름을 가져 가지 않는 것이 가장 좋습니다.
참고 : 3, 4 및 5는 모두 동일한 범주의 문제에 속합니다.
6. 프레임
(1) 기존 문제 : IE에서는 Window.top.FrameID 및 Window.top.Framename을 사용하여 프레임으로 표시된 창을 가져올 수 있습니다. Firefox에서는 window.top.framename 만 사용할 수 있습니다.
(2) 해결책 : 프레임의 ID와 이름을 동일하게 설정하고 Window.top.framename을 사용하여 프레임에 액세스하십시오.
2. Dom Operation
1. 요소의 텍스트 내용을 설정하십시오.
(1) 기존 문제 : IE는 InnerText를 사용하는 반면 Firefox는 TextContent를 사용하여 요소 텍스트 내용을 설정합니다.
(2) 해결책 : 텍스트 내용에 "<"및 ">"와 같은 특수 문자가 포함되어 있지 않으면 InnerHTML을 사용할 수 있습니다. 그렇지 않으면 사용할 수 있습니다.
var child = elem.firstchild; if (child! = null) elem.removechild (child); elem.appendChild (document.createtextNode (content));
2. 부모, 부모
(1) 기존 문제 : IE는 ParentElement를 사용하여 부모 노드를 얻을 수 있으며 부모는 모든 어린이 노드 노드를 얻을 수 있습니다. Firefox는 그것을 지원하지 않습니다.
(2) 해결책 : ParentNode 및 Parent.ChildNodes를 사용하십시오.
3. 어린이에 대한 설명.
(1) 기존 문제 : IE와 Firefox의 어린이에 대한 설명은 다릅니다. IE는 빈 텍스트 노드를 포함하지 않으며 Firefox에는 포함됩니다.
(2) 해결책 : 다음과 같이 텍스트 노드를 필터링하기 위해 Childnodes를 사용하십시오.
var children = elem.childnodes; for (i = 0; i <children.length; i ++) {if (children [i] .nodeType! = 3) {// 필터 텍스트 노드 // ...}}4. document.getElementsByName의 설명.
(1) 기존 문제 : IE의 getElementsByName은 <input> 및 <Img> 요소 만 확인하고 모든 요소는 Firefox에서 확인됩니다.
(2) 솔루션 : getElementsByName을 사용하여 <input> 및 <Img> 이외의 요소를 확인하지 마십시오. 단일 요소를 얻으려면 getElementById를 사용해보십시오.
5. document.getElementById의 설명.
(1) 기존 문제 : IE의 getElementById는 ID 속성을 확인할뿐만 아니라 이름 속성도 확인합니다. 이 요소는 이름 속성이 매개 변수와 일치하면 리턴됩니다. Firefox에서는 ID 속성 만 확인됩니다.
(2) 해결책 : ID와 이름을 동일하게 유지하고 한 요소의 이름 속성과 다른 요소의 ID 속성을 동일하게 만들지 마십시오.
III. 이벤트
1. event.x 및 event.y 문제
(1) 기존 문제 : 즉, 이벤트 객체에는 x, y 속성이 있지만 Firefox에는 없습니다.
(2) 해결책 : Firefox에서 event.x와 동등한 것은 event.pagex입니다. 사용할 수 있습니다 :
mx = event.x? event.x : event.pagex;
2. Window.event
(1) 기존 문제 : Window.Event를 사용하여 Firefox에서 실행할 수 없습니다
(2) 해결책 :
원본 코드 (IE에서 실행할 수 있음) :
<입력 유형 = "button"name = "somebutton"value = "제출"onclick = "javaScript : gotosUbmit ()"/> ... <script language = "javaScript"> function gotosUbmit () {... Alert (window.event); // window.event ...} </script>를 사용합니다새 코드 (IE 및 Firefox에서 실행할 수 있음) :
<입력 유형 = "button"name = "somebutton"value = "제출"onclick = "javaScript : gotosUbmit (event)"/> ... <script language = "javaScript"> 함수 gotosUbmit (evt) {evt = evt? EVT : (Window.Event? Window.Event : NULL); ... 경고 (EVT); // EVT를 사용합니다 ...} </script>3. AttachEvent 및 addeventListener
(1) 기존 문제 : IE는 첨부 이벤트를 사용하여 이벤트를 추가하고 Firefox는 addeventListener를 사용합니다.
(2) 해결책 : 다음과 같이, 이벤트 매개 변수의 차이에주의를 기울이십시오. 하나는 클릭하고 다른 하나는 클릭입니다.
if (document.attachevent) document.attachevent ( "click", clickhandler, false);
else document.addeventListener ( "onclick", clickhandler);
4. 문법
1. Const
(1) 기존 문제 : IE에서는 Const 키워드를 사용할 수 없습니다. 예를 들어, const constvar = 32; 즉, 이것은 구문 오류입니다.
(2) 해결책 : const를 사용하지 말고 대신 var를 사용하십시오.
2. 추가 쉼표
(1) 기존 문제 : Firefox의 물체 문자 그대로 상수에는 많은 쉼표가 포함되어 있으며, 즉, IE에서는 허용되지 않습니다. 다음 진술은 IE에서 불법입니다.
var obj = { 'key': 'aaa',}
(2) 해결책 : 초과 쉼표를 제거하십시오.
5. XML
1. xmlhttprequest를 만듭니다
(1) 기존 문제 : Firefox는 xmlhttprequest를 사용하고 즉, activexobject를 사용합니다.
(2) 해결책 :
if (window.xmlhttprequest) {req = new xmlhttprequest (); } else if (wind }2. DOM을 만듭니다
(1) 기존 문제 : Firefox와 IE는 DOM을 다르게 만듭니다.
(2) 해결책 :
함수 createxmldom () {var oxmldom; if (wind } else {// firefox oxmldom = document.implementation.createdocument ( "", "", null); }}3. XML로드
(1) 기존 문제 : 외부 파일을로드하려면 IE 및 Firefox를 사용할 수 있습니다.
oxmldom.async = false; // 이것은 Firefox에서 필요합니다
oxmldom.load ( "test.xml");
그러나 XML 문자열을 다른 방식으로로드합니다. IE에서 Oxmldom.loadxml ( "<root> <child/> </root>")을 직접 사용할 수 있지만 Firefox는 domparser를 사용해야합니다.
var oparser = new domparser ();
var oxmldom = oparser.parsefromstring ( "<root/>", "text/xml");
(2) 솔루션 : 더 나은 방법은 Firefox가 생성 한 XMLDOM에 loadXML 메소드를 추가하는 것입니다.
if (isfirefox) {// 브라우저 감지가 필요합니다
document.prototype.loadxml = function (sxml) {var oparser = new domparser (); var oxmldom = oparser.parsefromstring (sxml, "text/xml"); while (this.firstchild) this.removechild (this.firstchild); for (var i = 0; i <oxmldom.childnodes.length; i ++) {var onewnode = this.importnode (oxmldom.childnodes [i], true); 이. AppendChild (Onewnode); }}}이러한 방식으로,로드 XML 방법을 IE 및 Firefox에서 호출 할 수 있습니다.
4. XPATH 지원
(1) 기존 문제 : IE에서는 XMLDOM SELECTNODES를 직접 사용하여 XPATH 표현을 기반으로 노드를 선택할 수 있습니다. Firefox는 더 복잡하며 XPathEvaluator를 사용해야합니다.
즉:
var lstnodes = oxmldom.documentElement.SelectNodes ( "Employee/Name"); for (var i = 0; i <lstnodes.length; i ++) {alert (lstnodes [i] .firstchild.nodevalue); }Firefox :
var oevaluator = new xpathevaluator (); var oresult = oevaluator.evaluate ( "Employee/name", oxmldom.documentElement, null, xpathresult.ordered_node_iterator_type, null); var oelement = oresult.iteratenext (); while (orelement) {alert (oelement.firstchild.nodevalue); OELENTE = ORESULT.ITERATENEXT (); }(2) 솔루션 : Firefox 요소에 SelectNodes 메소드를 추가하는 더 나은 방법.
if (isfirefox) {// 브라우저는 요소를 감지해야합니다 .prototype.selectnodes = function (sxpath) {var oevaluator = new xpathevaluator (); var oresult = oevaluator.evaluate (sxpath, this, null, xpathresult.ordered_node_iterator_type, null); var anodes = 새로운 배열 (); if (oresult! = null) {var oelement = oresult.iteratenext (); while (olement) {anodes.push (orelement); OELENTE = ORESULT.ITERATENEXT (); }} 반환 양극; }}이러한 방식으로, SelectNodes 메소드는 IE 및 Firefox에서 호출 될 수 있습니다.
5. XSLT 지원
(1) 기존 문제 : IE에서는 XMLDOM의 TransferNode 메소드를 사용하여 HTML로 변환 할 수 있지만 Firefox는 XSLTProcessor를 사용해야합니다.
즉:
oxmldom.load ( "Employee.xml"); oxsldom.load ( "Employee.xslt"); var sresult = oxmldom.transformnode (oxsldom);
Firefox :
var oprocessor = new xsltprocessor (); oprocessor.importstylesheet (oxsldom); var oresultdom = oprocessor.transformtodocument (oxmldom); var oserializer = new xmlserializer (); var sxml = oserializer.serializetoString (oresultdom, "text/xml"); 경고 (sxml);
(2) 솔루션 : Firefox의 노드에 전송 노드 메소드를 추가하는 더 좋은 방법.
if (isfirefox) {// 브라우저는 node.prototype.transformnode = function (oxsldom)을 감지해야합니다. {var oprocessor = new xsltprocessor (); oprocessor.importstylesheet (oxsldom); var oresultdom = oprocessor.transformtodocument (oxmldom); var oserializer = new xmlserializer (); var sxml = oserializer.serializetoString (oresultdom, "text/xml"); 반환 sxml; }}이러한 방식으로, IE 및 Firefox에서 전송 노드 방법을 호출 할 수 있습니다.
위의 내용은 브라우저 호환 JS 작성 방법의 요약입니다. 모든 사람의 학습에 도움이되기를 바랍니다.