집 > 기사 > 웹 프론트엔드 > js의 일부 호환성 및 오류가 발생하기 쉬운 문제 요약

js의 일부 호환성 및 오류가 발생하기 쉬운 문제 요약

小云云원래의: 2017-12-18 11:26:031405검색

우리는 또한 많은 js 호환성 문제를 겪었습니다. 이 기사는 js의 일부 호환성과 오류가 발생하기 쉬운 문제를 요약한 기사입니다. 이 기사가 모든 사람에게 도움이 되기를 바랍니다. 모두를 도울 수 있습니다.

1. 속성 관련

보통 속성과 속성을 합쳐서 속성이라고 부르는데 실제로는 다른 개념입니다.

속성은 HTML 텍스트에 나타나며, 특성에 대한 수정은 확실해야 합니다.

속성(속성)은 브라우저에 내장된 일부 기능을 제외하고 HTML 텍스트에 영향을 주지 않습니다.

1. IE6/7은 속성과 특성을 구분하지 않습니다.

다른 브라우저는 속성과 특성을 구분하지 않지만 IE67에서는 이름이 많지만 속성 이름만 사용하여 특성을 삭제할 수 있습니다. 이 두 가지의 시대는 같지만 항상 차이가 있습니다.

2. IE6/7은 값이 문자열이 아닌 기능을 작동하기 위해 getAttribute/setAttribute를 사용할 수 없습니다.

최신 브라우저에서 getAttribute는 확실히 HTML에서 해당 문자열을 반환하므로 IE67에서 반환된 결과는 예측할 수 없습니다. , 우리는 AttributeNode를 사용하여 속성을 작동할 것입니다.

3. IE6/7/8은 스타일 속성을 통해 CSS 텍스트를 얻을 수 없습니다.

이 문제는 IE6/7이 속성과 특성을 구분하지 않아서 발생합니다. 스타일 속성을 얻을 때 elem.style.cssText를 사용하세요.

4. IE6/7은 상대 URL을 절대 URL로 구문 분석합니다.

이 문제로 인해 IE6/7에서 빈 src 속성이 반복되는 요청을 생성할 수도 있습니다.

5. 요소 특성의 기본 동작이 다릅니다

이 범주에는 더 많은 버그가 있습니다. 예를 들어 일부 오래된 웹킷 브라우저에서는 체크박스/라디오의 기본값이 켜져 있지 않고 ""입니다. 일부 이전 웹킷 브라우저에서는 선택 항목의 첫 번째 요소가 선택되지 않습니다.

2. 스타일 작업

일반적으로 스타일에는 인라인 스타일 가져오기 및 설정과 요소의 계산된 스타일 가져오기가 포함됩니다

1. IE는 background-position-x/y를 지원하지만 다른 브라우저는

Background-position-x를 지원하지 않습니다. /y를 사용하면 이미지의 위치를 편리하게 그라데이션할 수 있습니다. 지원되지 않는 경우 이를 처리하기 위해 구문 분석 배경 위치 속성을 사용하는 것을 고려할 수 있습니다.

2. IE6/7은 불투명도 속성을 지원하지 않습니다.

알파 필터를 통해 동일한 효과를 얻을 수 있지만 요소의 해시 레이아웃을 트리거하는 것을 기억하세요.

3. IE6/7/8은 실수로 복제에 의해 생성된 노드가 일부 속성을 상속하도록 허용합니다.

예를 들어 배경을 한두 개 수정하면 동시에 변경됩니다.

4. 계산된 스타일을 얻는 다양한 방법

IE6/7/8은 elem.currentStyle을 사용하는 반면 다른 브라우저는 window.getCompulatedStyle 함수를 사용합니다.

5. 다양한 픽셀화 방법

픽셀화란 단위가 픽셀이 아닌 거리를 픽셀로 변환하여 계산을 용이하게 하는 것을 말합니다. 엄밀히 말하면 이는 호환성 문제는 아니지만 전반적으로 사용될 수 있습니다. IE6/7/8에서는 처리를 위해 pixelLeft와 함께 elem.runtimeStyle을 사용할 수 있습니다.

최신 브라우저는 너비 속성을 사용할 수 있습니다.

6. CSS를 얻을 때 일부 BUG 동작

Webkti 핵심 브라우저에서는 margin-right가 종종 잘못됩니다.

3. 쿼리 연산

쿼리 전달이란 몇 가지 특성 문자열을 통해 요소 집합을 찾거나 요소가 문자열을 만족하는지 판단하는 것을 의미합니다.

1. IE6/7은 id와 name을 구분하지 않습니다

IE6/7에서 getElementById와 getElementsByName을 사용하면 주어진 값과 동일한 id나 이름을 가진 요소가 동시에 반환됩니다. 이름은 일반적으로 백엔드에서 합의되므로 JS를 작성할 때 ID가 이름과 중복되지 않도록 해야 합니다.

2. IE6/7은 getElementsByClassName 및 querySelectorAll을 지원하지 않습니다

이 두 기능은 IE8부터 지원되므로 IE6/7에서는 실제로 getElementByTagName만 사용할 수 있습니다.

3. IE6/7은 getElementsByTagName('*')을 지원하지 않으며 요소가 아닌 노드를 반환합니다.

*를 사용하지 않거나 직접 필터링하는 함수를 작성하세요.

4. IE8의 querySelectorAll은 속성 선택기에 적합하지 않습니다.

거의 모든 브라우저 사전 정의 속성에 문제가 있습니다. 맞춤 속성을 사용하거나 속성 선택기를 사용하지 마세요.

5. querySelectorAll은 IE8에서 의사 클래스를 지원하지 않습니다.

때때로 의사 클래스가 매우 유용하지만 IE8은 이를 지원하지 않습니다: first, :last, :even, :odd, :eq, :nth, :lt , :gt 는 의사 클래스가 아니므로 언제든지 사용하면 안 됩니다.

6. IE9의 일치 함수는 DOM 트리에 없는 요소를 처리할 수 없습니다.

요소가 DOM 트리에 없으면 반드시 false를 반환합니다. 그렇지 않으면 요소를 넣기만 하면 됩니다. 물론, 리플로우를 피하기 위해 자신만의 매칭 함수를 작성할 수도 있습니다.

4. 이벤트 동작

보통 다들 JS 호환성에 대해 물을 때 가장 먼저 반응하는 것은 AttachEvent와 addEventListener인데, 이 두 함수의 차이점에 대해서는 아직도 자세한 내용이 많습니다.

1. 이벤트 작업 개체가 다릅니다.

addEventListener는 이벤트가 발생하는 현재 개체이고, attachmentEvent는 창입니다.

. 이벤트 매개변수 개체가 다릅니다.

attachEvent에 매개변수 e가 있다는 점에 유의하세요. e = e || event를 쓰지 마세요. 버튼이나 마녀. pageY가 지원되는지 여부 등이 있습니다.

2. 사악한 롤러 사건

휠 이벤트에 대한 지원은 엉망이고 규칙은 다음과 같습니다:
IE6-11 크롬 마우스휠 휠Detla down-120 up 120

firefox DOMMouseScroll세부 사항 down 3up-3

firefox 휠 detlaY down 3 up-3

IE9-11 휠 델타Y 하위 40 상위 -40

크롬 휠 델타Y 하위 100 상위 -100

3. 세 가지 버블이 아닌 이벤트

모든 브라우저의 포커스/블러 이벤트는 버블링을 지원하지 않습니다. 다행히 대부분의 브라우저는 포커스인을 지원합니다. /focusout 이벤트인데, 빌어먹을 Firefox는 이것을 지원하지도 않습니다.

IE678에서는 제출 이벤트가 발생하지 않습니다.

IE678에서는 블러가 발생할 때까지 변경 이벤트가 실행되지 않습니다.

그리고 이 세 가지 문제를 해결할 효과적인 수단이 없으며 시뮬레이션 트리거를 통해서만 해결할 수 있습니다.

4. a.click()

이 방법은 많은 브라우저에서 안전하지 않습니다. 일단 실행되면 기본 동작이 차단되더라도 페이지는 계속 이동합니다.

5. 노드 작업

노드 작업은 일반적으로 노드를 복사하거나 생성하거나 노드의 위치를 이동하는 것을 의미합니다.

1..innerHTML

IE6/7/8에서 innerHTML을 사용할 때 앞에 텍스트 노드가 있어야 합니다. 그렇지 않으면 많은 태그가 손실됩니다. 또한 대부분의 경우 innerHTML을 사용하면 defaultValue 속성에 오류가 발생합니다.

2. 쓸모없는 tbody

IE6/7/8은 빈 테이블에 빈 tbody를 자동으로 추가합니다

3.Node를 복제할 때 AttachEvent 이벤트가 복사됩니다

그리고 우리가 바인딩한 이벤트를 기록하지 않으면 그렇지 않을 수 있습니다. 풀지 마세요.

js의 일부 호환성 및 오류가 발생하기 쉬운 문제 요약

관련 기사