브라우저 호환성 문제는 무시하기 쉽지만 실제 개발에서 가장 중요한 부분입니다. 이전 버전의 브라우저의 호환성 문제에 대해 이야기하기 전에 먼저 기능 감지가 무엇인지 이해해야합니다. 브라우저에 그러한 기능이 있는지, 즉 현재 브라우저가 호출 할 속성 또는 메소드를 지원하는지 여부를 결정하는 것입니다. 다음은 간단한 소개입니다.
1. 내부 텍스트 및 내부 컨텐츠
1) 내 텍스트 및 내부 컨텐츠의 함수는 동일합니다.
2) IE8 이전의 내부 텍스트 브라우저 지원
3) Firefox 지원의 기존 버전
4) 새 버전의 브라우저는 두 방법을 모두 지원합니다.
1 // 오래된 버전의 브라우저는 내부 텍스트 및 InnerContent2 if (element.textContent) {3 return Element.TextContent; 4} else {5 return emettment.innerText; 6}과 호환됩니다.2. 형제 노드/요소의 호환성 문제를 가져옵니다
1) 형제 노드, 모든 브라우저 지원
extsibling 다음 Brother 노드는 비 요소 노드 일 수 있습니다. 텍스트 노드가 얻어집니다
previouse 이전 형제 노드는 비 요소 노드 일 수 있습니다. 텍스트 노드가 얻어집니다
2) 형제 요소, IE8은 이전에 지원하지 않았습니다
previous elementsibling 이전 다음 형제 요소를 얻고 빈을 무시합니다.
②NextElementsibling 다음 인접한 형제 요소를 얻고 빈을 무시합니다.
// 호환 브라우저 // 다음 다음 형제 자매 요소 기능 getNextElement (element) {// capability detection if (element.nextElementSibling) {return.nextElementSibling; } else {var node = element.nextsibling; while (node && node.nodeType! == 1) {node = node.nextibling; } 반환 노드; }} /*** 이전 요소를 반환*@param 요소*@returns {*}*/function getPreviousElement (element) {if (element.previousElementsibling) {return.previousElementSibling; } else {var el = element.previousSibling; while (el && el.nodeType! == 1) {el = el.previousSibling; } 반환 el; }} /*** 첫 번째 요소 FirstElementChild*@param parent*@returns {*}*/function getFirstElement (parent) {if (parent.firstelementchild) {return parent.firstelementchild; } else {var el = parent.firstchild; while (el && el.nodeType! == 1) {el = el.nextsibling; } 반환 el; }} /*** 마지막 요소를 반환*@param parent*@returns {*}*/function getLastElement (parent) {if (parent.lastElementchild) {return parent.lastElementChild; } else {var el = parent.lastchild; while (el && el.nodeType! == 1) {el = el.previousSibling; } 반환 el; }} /*** 현재 요소의 모든 형제 요소를 가져옵니다*@param 요소*@returns {array}*/function 형제 (요소) {if (! element) return; var 요소 = []; var el = element.previoussibling; while (el) {if (el.nodetype === 1) {elements.push (el); } el = el.previoussibling; } el = element.previousSibling; while (el) {if (el.nodetype === 1) {elements.push (el); } el = el.nextibling; } el = element.previousSibling; } 반환 요소;}3. array.filter ();
// 지정된 기능으로 모든 요소를 테스트하고 테스트를 통과 한 모든 요소가 포함 된 새 배열을 만듭니다.
// if (! array.prototype.filter) {array.prototype.filter = function (fun/ *, thisarg */) { "Strict 사용"; if (this === void 0 || this === null) 새 typeError (); var t = 객체 (this); var len = t.length >>> 0; if (typeof fun! == "function") 새 typeError ()를 던지십시오. var res = []; var thisarg = arguments.length> = 2? 인수 [1] : void 0; for (var i = 0; i <len; i ++) {if (i in t) {var val = t [i]; // 참고 : 기술적으로 객체. // 그러나 그 방법의 새로운 방법과 충돌은 // 희귀해야하므로 더 호환되는 대안을 사용하십시오. if (fun.call (thisarg, val, i, t)) res.push (val); }} return res; };}4. array.foreach ();
// 트래버스 배열
// 이전 환경과 호환 // ECMA-262의 생산 단계, Edition 5, 15.4.4.18// 참조 : http://es5.github.io/#x15.4.4.18if (! array.prototype.foreach) {array.prototype.foreach = function (Callback, thisarg) {var t, k; if (this == null) {Throw new TypeError ( '이것은 NULL이거나 정의되지 않음'); } // 1. O를 toobject ()를 호출 한 결과 // | this | 논쟁으로서 가치. var o = 객체 (this); // 2. LenValue를 "길이"와 인수와 함께 get () 내부 // 메소드를 호출 한 결과가되도록하십시오. // 3. Len을 Touint32 (LenValue)로 둡니다. var len = O.length >>> 0; // 4. iscallable (콜백)이 false 인 경우 TypeError 예외를 던지십시오. // 참조 : http://es5.github.com/#x9.11 if (callback types! == "function") {Throw New TypeError (Callback + '는 함수가 아님); } // 5. Thisarg가 제공되면 t thisarg가되게하십시오. 그렇지 않으면 // t가 정의되지 않도록하십시오. if (arguments.length> 1) {t = thisarg; } // 6. k를 0 k = 0으로하자; // 7. 반복, k <len while (k <len) {var kvalue; // a. pk를 tostring (k)으로합시다. // 이것은 IN 연산자의 LHS 연산자에게 암시 적입니다. // b. kpresent를 hasproperty // hasproperty // hasproperty // hasproperty를 호출 한 결과 인 Argument pk와 함께 호출하십시오. //이 단계는 c // c와 결합 할 수 있습니다. kpresent가 true 인 경우 (k in o) {// i. kvalue를 인수 pk와 함께 get 내부 // 메소드를 호출 한 결과가되도록하십시오. kvalue = o [k]; // II. kvalue, k 및 o. callback.call (t, kvalue, k, o)을 포함하는이 값 및 인수 목록을 t로 통화 내부 콜백 메소드를 호출하십시오. } // d. 1 씩 k를 증가시킨다. K ++; } // 8. return undefined};}5. 등록 이벤트
.addeventListener = 함수 (유형, 리스너, usecapture) {};
// 첫 번째 매개 변수 이벤트 이름입니다
// 두 번째 매개 변수 이벤트 핸들러 함수 (리스너)
// 세 번째 매개 변수 true는 거품을 캡처합니다
// IE9 이후에 만 지원됩니다
// 오래된 환경과 호환됩니다
var eventTools = {addeventListener : 함수 (요소, 이벤트 이름, 리스너) {// 용량 감지 if (element.addeventListener) {element.addeventListener (eventName, Lister, False); } else if (element.attachevent) {element.attachevent ( "on" + eventName, Listener); } else {element [on " + eventName] = 리스너; }}, // 이벤트를 제거하려면 익명 함수 removeEventListener : function (요소, 이벤트 이름, 리스너) {if (element.removeEventListener) {element.removeEventListener (EventName, Lister, False); } else if (element.detachevent) {// IE8 등록하기 전에 이벤트를 제거하고 제거하기 전에 rement.detachevent.detachevent ( "on"+eventName, Listener); } else {element [on " + eventName] = null; }}};6. 이벤트 객체
1) 이벤트 매개 변수 e는 이벤트 객체, 표준 획득 방법입니다.
btn.onclick = function (e) {}
2) E.EventPhase 이벤트 단계에서 IE8은 이전에 지원하지 않았습니다.
3) E.Target은 항상 이벤트를 트리거하는 객체입니다 (클릭 버튼)
i) ie8 srcelement 이전
ii) 브라우저 호환
var target = e.target || Window.event.srcelement;
// 브라우저와 호환되는 이벤트 객체 가져 오기 getEvent : function (e) {return e || Window.event; // E 이벤트 객체를 얻는 표준 방법; window.event 이벤트 ie8} 이전에 이벤트 객체를 얻는 방법} // 대상과 호환 가능 getTarget : function (e) {return e.target || e.srcelement; }7. 페이지에서 마우스 위치를 가져옵니다
① 시각적 영역에서의 위치 : E.Clientx E.Clienty
② 문서의 위치 :
i) e.pagex e.pagey
ii) 브라우저 호환
var scrolltop = document.documentElement.scrolltop || document.body.scrolltop; var pagey = e.clienty + scrolltop;
8. 스크롤 거리를 얻으십시오
// 호환 브라우저 var scrolltop = document.documentElement.scrolltop || document.body.scrolltop;
9. 텍스트 선택을 취소하십시오
// 브라우저 Window.getSelection과 호환 되나요? window.getSelection (). removealLranges () : document.Selection.Empty ();
[요약] 이것은 부분 요약 일 뿐이며 실제 개발 중에 다양한 브라우저 호환성 문제를 겪게됩니다. 다른 브라우저는 PC와 휴대 전화에서 다른 적응 문제를 겪게됩니다. 이것들은 어린이 신발이 발견하고 요약하기를 기다리고 있습니다 ~~ 도움이되기를 바랍니다. 단점에 대한 조언을 해주세요 ~~~
JavaScript에서 브라우저의 호환성 문제에 대한 위의 간단한 분석은 내가 공유하는 모든 콘텐츠입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.