JavaScript의 AngularJS_AngularJS와 IE 브라우저 호환성 테스트
- WBOY원래의
- 2016-05-16 15:53:471151검색
짧은 버전
Angular 애플리케이션이 IE에서 작동하는지 확인하려면 다음을 확인하세요.
1. IE7 이하의 Polyfill JSON.stringify. 폴리필에는 JSON2 또는 JSON3을 사용할 수 있습니다.
<!doctype html>
<html xmlns:ng="http://angularjs.org">
<head>
<!--[if lte IE 7]>
<script src="/path/to/json2.js"></script>
<![endif]-->
</head>
<body>
...
</body>
</html>
2. 연결 지점의 루트 요소에 id="ng-app"을 추가하고 ng-app 속성을 사용합니다
<!doctype html> <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName"> ... </html>
3. cbe1678e5ddae3bab5a303561ac9ed86와 같은 맞춤 요소 태그를 사용할 수 없습니다(대신 08c7689d8bf8fe33141f270e3fd6c1d5 속성 버전 사용).
4. 맞춤 요소 태그를 사용해야 하는 경우 IE8 및 이전 버전을 사용할 수 있도록 다음 단계를 수행해야 합니다.
<!doctype html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
<head>
<!--[if lte IE 8]>
<script>
document.createElement('ng-include');
document.createElement('ng-pluralize');
document.createElement('ng-view');
// Optionally these for CSS
document.createElement('ng:include');
document.createElement('ng:pluralize');
document.createElement('ng:view');
</script>
<![endif]-->
</head>
<body>
...
</body>
</html>
5. style="{{ someCss }}" 대신 ng 스타일 태그를 사용하세요. 후속 버전은 Chrome 및 Firefox에서 작동하지만 IE 버전
중요한 부분은 다음과 같습니다.
- xmlns:ng- 네임스페이스 - 각 사용자 정의 태그에 대한 네임스페이스를 지정해야 합니다.
- document.createElement(yourTagName) - 사용자 정의 태그 이름을 만듭니다. 이는 이전 버전의 IE에서만 발생하는 문제이므로 로드 조건을 지정해야 합니다. 네임스페이스가 없고 HTML에 정의되지 않은 모든 태그에 대해 IE가 인식할 수 있도록 미리 선언해야 합니다.
버전 정보
IE는 비표준 태그 요소에 많은 문제가 있습니다. 이러한 문제는 크게 두 가지 범주로 나눌 수 있으며 각 범주에는 고유한 솔루션이 있습니다.
- 태그 이름이 my:로 시작하면 XML 네임스페이스로 간주되며 해당 네임스페이스 선언이 있어야 합니다60004671f7164bb85fa40ec764aea13c
- 태그에 : 기호가 없지만 표준 HTML 태그가 아닌 경우 document.createElement('my-tag')를 사용하여 미리 생성해야 합니다.
- CSS 선택기를 사용하여 사용자 정의 태그의 스타일을 변경하려는 경우 네임스페이스 유무에 관계없이 document.createElement('my-tag')를 사용하여 미리 생성해야 합니다.
좋은 소식
좋은 소식은 이러한 제한 사항이 요소 태그 이름에만 적용되고 요소 속성 이름에는 적용되지 않는다는 것입니다. 따라서 IE에서는 특별한 처리가 필요하지 않습니다: ee9aa6fc82bf3c8d8eeb270a32331a7216b28748ea4df4d9c2150843fecfba68
그렇지 않으면 어떻게 되나요?
HTML의 알 수 없는 태그 mytag를 사용하는 경우(my:tag 또는 my-tag의 결과는 동일함):
<html> <body> <mytag>some text</mytag> </body> </html>
은 다음 DOM을 구문 분석해야 합니다.
#document
+- HTML
+- BODY
+- mytag
+- #text: some text
예상되는 동작은 BODY 요소에 일부 텍스트가 포함된 mytag 하위 요소가 있다는 것입니다.
단, IE에서는 그렇지 않습니다. (위의 개정판이 포함되지 않은 경우)
#document
+- HTML
+- BODY
+- mytag
+- #text: some text
+- /mytag
IE에서 BODY 요소에는 세 가지 하위 요소가 있습니다.
1, 자동으로 닫히는 mytag입니다. 예를 들어, 스스로 닫는 태그 076402276aae5dbec7f672f8f4e5cc81입니다. /는 선택사항이지만 0c6dc11e160d3b678d68754cc175188a 태그는 하위 요소를 가질 수 없습니다. 브라우저는 0c6dc11e160d3b678d68754cc175188a일부 텍스트0b9f73f8e206867bd1f5dc5957dbcb38를 3개의 형제 태그로 처리하지만 일부 텍스트는 하위 요소가 아닙니다.
2, 텍스트 노드 일부 텍스트. 위에서 이것은 형제 태그가 아닌 mytag의 하위 요소여야 합니다
3. 손상된 자체 폐쇄 /mytag. 요소 이름에 / 문자를 사용할 수 없기 때문에 이는 손상된 요소입니다. 또한 이 하위 폐쇄형 요소는 DOM의 일부가 아니며 DOM의 구조를 설명하는 데만 사용됩니다.
CSS 스타일 사용자 정의 태그 이름 지정
CSS 선택기가 맞춤 요소에서 작동할 수 있도록 하려면 XML 네임스페이스에 관계없이 document.createElement('my-tag')를 사용하여 맞춤 요소의 이름을 미리 생성해야 합니다.
<html xmlns:ng="needed for ng: namespace">
<head>
<!--[if lte IE 8]>
<script>
// 需要确认ng-include被正常解析
document.createElement('ng-include');
// 需求启用CSS引用
document.createElement('ng:view');
</script>
<![endif]-->
<style>
ng\:view {
display: block;
border: 1px solid red;
}
ng-include {
display: block;
border: 1px solid blue;
}
</style>
</head>
<body>
<ng:view></ng:view>
<ng-include></ng-include>
...
</body>
</html>