1. document.formname.item ( "ItemName") 문제
문제 설명 : IE에서는 document.formname.item ( "itemName") 또는 docum Firefox에서는 document.formname.elements [ "elementName"] 만 사용할 수 있습니다.
솔루션 : Unified 방식으로 document.formname.elements [ "Emplicname"]를 사용하십시오.
2. 수집 객체 문제
문제 설명 : IE에서는 () 또는 []를 사용하여 컬렉션 클래스 객체를 얻을 수 있습니다. Firefox에서는 []를 사용하여 컬렉션 클래스 객체를 얻을 수 있습니다.
솔루션 : []를 사용하여 통일 된 방식으로 수집 클래스 객체를 얻습니다.
3. 사용자 정의 속성 문제
문제 설명 : 즉, 정기적 인 속성을 얻기 위해 정기 속성을 얻는 방법을 사용하거나 getAttribute ()를 사용하여 사용자 정의 속성을 얻을 수 있습니다. Firefox에서는 getAttribute () 만 사용하여 사용자 정의 속성을 얻을 수 있습니다.
해결 방법 : getAttribute ()를 통해 균일하게 사용자 정의 속성을 얻습니다.
4. 평가 ( "idname") 문제
문제 설명 : IE에서는 Eval ( "Idname") 또는 getElementByid ( "idname")를 사용하여 idname을 가진 html 객체를 얻을 수 있습니다. Firefox에서는 getElementById ( "idname") 만 사용하여 idname으로 HTML 객체를 얻을 수 있습니다.
솔루션 : getElementByid ( "idname")를 사용하여 idname으로 id를 가진 html 객체를 얻습니다.
5. 변수 이름과 특정 HTML 객체의 ID 문제
문제 설명 : 즉, HTML 객체의 ID는 문서의 하위 객체의 변수 이름으로 직접 사용할 수 있지만 Firefox에서는 직접 사용할 수 있습니다. Firefox에서는 HTML 객체 ID와 동일한 변수 이름을 사용할 수 있지만 IE에서는 사용할 수 없습니다.
해결 방법 : document.idname 대신 document.getElementByid ( "idname")를 사용하십시오. 오류를 줄이기 위해 동일한 HTML 객체 ID를 가진 가변 이름을 가져 가지 않는 것이 가장 좋습니다. 변수를 선언 할 때는 모호성을 피하기 위해 VAR 키워드를 추가하십시오.
6. Const 문제
문제 설명 : Firefox에서는 Const 키워드 또는 VAR 키워드를 사용하여 상수를 정의 할 수 있습니다. 즉, VAR 키워드를 사용하여 상수를 정의 할 수 있습니다.
해결책 : VAR 키워드를 사용하여 상수를 균일하게 정의하십시오.
7. 입력. 타입 속성 문제
문제 설명 : IE의 입력 속성은 읽기 전용입니다. 그러나 Firefox의 입력 속성은 읽기 쓰기입니다.
해결책 : 입력을 수정하지 마십시오. 이를 수정 해야하는 경우 먼저 원래 입력을 숨기고 동일한 위치에 새 입력 요소를 삽입 할 수 있습니다.
8. Window.Event 문제
문제 설명 : Window.Event는 Firefox가 아닌 IE에서만 실행할 수 있습니다. Firefox 이벤트는 이벤트가 발생하는 장면에서만 사용할 수 있기 때문입니다.
솔루션 : 이벤트가 발생하는 기능에 이벤트 매개 변수를 추가하고 var myevent = evt? evt : (window.event? window.event : null)를 사용하십시오.
예:
<입력 유형 = "버튼"onclick = "dosomething (event)"/> <script language = "javaScript"> 함수 dosomething (evt) {var myevent = evt? evt : (window.event? window.event : null) ...}.9. event.x 및 event.y 문제
문제 설명 : 즉, 짝수 객체에는 x 및 y 속성이 있지만 pagex 및 pagey 속성은 없습니다. Firefox에서 짝수 객체에는 pagex 및 pagey 속성이 있지만 x 및 y 속성은 없습니다.
솔루션 : var myx = event.x? event.x : event.pagex; var myy = event.y? Event.y : event.pagey;
8 번째 문제를 고려하면 이벤트 대신 Myevent를 사용하십시오.
10. 이벤트 .Srcelement 문제
문제 설명 : 즉, 짝수 객체에는 srcelement 속성이 있지만 대상 속성은 없습니다. Firefox에서 짝수 객체에는 대상 특성이 있지만 srcelement 속성은 없습니다.
해결책 : srcobj = event.srcelement를 사용합니까? event.srcelement : event.target;
8 번째 문제를 고려하면 이벤트 대신 Myevent를 사용하십시오.
11. Window.location.href 문제
문제 설명 : IE 또는 Firefox2.0.x에서는 Window.Location 또는 Window.location.href를 사용할 수 있습니다. Firefox1.5.x에서는 Window.location 만 사용할 수 있습니다.
해결 방법 : Window.location.href 대신 Window.location을 사용하십시오. 물론 location.replace () 메소드를 사용하는 것도 고려할 수도 있습니다.
12. 모달 및 비 모달 창 문제
문제 설명 : 즉, 모달과 비 모달 창문은 showmodaldialog 및 showmodelessDialog를 통해 열 수 있습니다. Firefox에서는 할 수 없습니다.
솔루션 : Window.open (PageUrl, 이름, 매개 변수)을 사용하여 새 창을 열십시오.
자식 창의 매개 변수를 상위 창으로 다시 전달 해야하는 경우 Child Window에서 Window.opener를 사용하여 부모 창에 액세스 할 수 있습니다. 상위 창이 자식 창을 제어 해야하는 경우 var subwindow = window.open (pageurl, name, parameters)을 사용하십시오. 새로 열린 창 객체를 얻으려면.
13, 프레임 및 Iframe 문제
다음 프레임이 예입니다.
(1) 액세스 프레임 개체
IE : Window.FrameID 또는 Window.FramEname을 사용 하여이 프레임 객체에 액세스하십시오.
Firefox : window.framename을 사용 하여이 프레임 객체에 액세스하십시오.
솔루션 : Window.Document.GetElementById ( "FrameId")를 사용 하여이 프레임 객체에 액세스하십시오.
(2) 프레임 컨텐츠 스위치
IE 및 Firefox에서는 Window.document.getElementById ( "frameid"). src = "windjx.com.html"또는 window.framename.location = "window.framename.html"을 사용할 수 있습니다.
프레임의 매개 변수를 상위 창으로 다시 전달 해야하는 경우 프레임의 상위 키워드를 사용하여 부모 창에 액세스 할 수 있습니다.
14. 신체 로딩 문제
문제 설명 : Body 태그가 브라우저에서 완전히 읽기 전에 Firefox의 신체 물체가 존재합니다. 바디 태그가 브라우저에서 완전히 읽은 후에 IE의 신체 물체가 존재해야합니다.
[참고]이 문제는 아직 확인되지 않았으며 확인 후 수정됩니다.
[참고] 위의 문제는 IE6, Opera9 및 Firefox2에 존재하지 않는다는 것이 입증되었습니다. 간단한 JS 스크립트는이 요소가 아직로드되지 않은 경우에도 스크립트 전에로드 된 모든 객체와 요소에 액세스 할 수 있습니다.
15. 이벤트 대표 방법
문제 설명 : IE에서는 document.body.onload = Inject를 사용하십시오. 여기서 기능 inject ()가 구현 된 경우; Firefox에서 document.body.onload = inject ()를 사용하십시오.
솔루션 : document.body.onload = new 함수 ( 'inject ()'); 또는 document.body.onload = function () {/* 여기 코드가 있습니다*/}
[참고] 기능과 기능의 차이
16. 부모 요소의 차이가 접근했습니다
문제 설명 : 즉, obj.parentElement 또는 obj.parentNode를 사용하여 OBJ의 상위 노드에 액세스하십시오. Firefox에서 obj.parentNode를 사용하여 OBJ의 상위 노드에 액세스하십시오.
솔루션 : Firefox와 IE가 모두 DOM을 지원하기 때문에 OBJ.ParentNode는 OBJ의 상위 노드에 액세스하는 데 사용됩니다.
17. 내 텍스트의 문제.
문제 설명 : IE에서 내부 텍스트가 올바르게 작동하지만 내부 텍스트는 Firefox에서는 작동하지 않습니다.
해결 방법 : 비 EIE 브라우저에서 내부 텍스트 대신 TextContent를 사용하십시오.
예:
if (navigator.appName.indexOf ( "탐색기")> -1) {document.getElementById ( 'element'). innerText = "내 텍스트"; } else {document.getElementById ( 'element'). textContent = "; 내 텍스트"; }[참고] InnerHTML은 IE 및 Firefox와 같은 브라우저에서 지원됩니다. Outerhtml과 같은 다른 사람들은 IE에 의해서만 지원되므로 사용하지 않는 것이 가장 좋습니다.
18. 테이블 작동 문제
문제 설명 : 즉, Firefox 및 기타 브라우저는 테이블 태그에 대해 다른 작업을 가지고 있습니다. 즉, 내부 html 값을 테이블 및 tr에 할당 할 수 없습니다. JS를 사용하는 경우 AppendChild 메소드를 사용하는 것은 작동하지 않습니다. AppendChild는 테이블에 행을 삽입 할 때 Firefox를 지원하지만 IE는 지원하지 않습니다.
솔루션 : 행을 tbody에 삽입하고 직접 테이블에 삽입하지 마십시오.
해결책:
// 빈 줄을 테이블에 추가하십시오 : var row = otable.insertrow (-1); var cell = document.createelement ( "TD"); cell.innerhtml = ""; cell.classname = "xxxx"; Row.appendChild (셀);
[참고] JS 프레임 워크 세트를 사용하여 jQuery와 같은 테이블을 작동하는 것이 좋습니다.
• 테이블의 행 수와 열을 얻으십시오.
즉, 다음 코드를 사용하여 행 수와 열을 얻을 수 있습니다.
var detailt = grid.gettable ( "11"); // 행의 길이를 가져옵니다. var r = detailt.rows.length; // 열의 길이를 가져옵니다. var l = detailt.cells.length;
Firefox 또는 Google에서 열 길이를 얻는 것이 유효하지 않습니다.
해결책:
var detailt = grid.gettable ( "11"); // 행의 길이를 가져옵니다. var r = detailt.rows.length; // 열의 길이를 가져옵니다. var l = detailt.rows [0] .cells.length;
19. 객체 너비 및 높이 할당 문제
문제 설명 : obj.style.height = imgobj.height in firefox와 유사한 진술은 유효하지 않습니다.
솔루션 : OBJ.style.height = imgobj.height + 'px'를 사용하여 균일하게 사용하십시오.
20. setAttribute ( '스타일', '색상 : 빨간색;')
Firefox는 지원합니다 (즉, 모든 브라우저는 이제 모든 브라우저를 지원합니다), 즉,이를 지원하지 않습니다.
솔루션 : setattribute do n't statattribute ( 'style', 'color : red')
Object.style.csstext = 'Color : Red;'사용하십시오. (이 글쓰기에는 예외가 있습니다)
가장 좋은 방법은 위의 모든 방법을 사용하는 것이며, 완벽합니다.
21. 클래스 이름 설정
setattribute ( 'class', 'styleclass')
Firefox는 지원하지만 IE는 지원하지 않습니다 (속성 이름은 클래스임을 지정하고, 즉 요소의 클래스 속성을 설정하지 않습니다. 반대로, 즉, setattribute가 사용될 때 클래스 이름 속성을 자동으로 인식합니다).
해결책:
setAttribute ( 'class', 'styleclass') setattribute ( 'classname', 'styleclass') 또는 직접 개체 .classname = 'Styleclass';
IE 및 FF 모두 객체를 지원합니다 .ClassName.
22. stattribute로 이벤트를 설정하십시오
var obj = document.getElementById ( 'objid');
obj.setattribute ( 'onclick', 'funcitonname ();');
Firefox는 지원하지만 IE는 지원하지 않습니다
해결책:
IE에서는 DOT 표기법을 사용하여 필요한 이벤트 핸들러를 참조해야하며 익명 기능을 할당해야합니다.
다음과 같이 :
var obj = document.getElementById ( 'objid'); obj.onclick = function () {fucntionname ();};이 방법은 모든 브라우저에서 지원됩니다
23. 라디오 버튼을 만듭니다
IE 이외의 브라우저
var rdo = document.createElement ( '입력'); rdo.setattribute ( 'type', 'radio'); rdo.setattribute ( 'name', 'radiobtn'); rdo.setattribute ( 'value', 'checked');
즉:
var rdo = document.createElement ( "<input name ="radiobtn "type ="radio "value ="Checked " />");
해결책:
이 차이는 이전의 차이점과 다릅니다. 이번에는 완전히 다르므로 해결할 수있는 일반적인 방법이 없으므로 If-Else 만
다행히도, 즉 다른 브라우저가 인식 할 수없는 문서의 고유 한 속성을 인식 할 수 있습니다. 문제가 해결되었습니다.
JavaScript에서 멀티 브라우저 호환성의 23 가지 문제에 대한 빠른 솔루션은 내가 공유하는 전체 컨텐츠입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.