JavaScript의 AngularJS_AngularJS와 IE 브라우저 호환성 테스트-JS 튜토리얼-php.cn

JavaScript의 AngularJS_AngularJS와 IE 브라우저 호환성 테스트

WBOY

풀어 주다： 2016-05-16 15:53:47

원래의

1182명이 탐색했습니다.

짧은 버전

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. 와 같은 맞춤 요소 태그를 사용할 수 없습니다(대신

속성 버전 사용).

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 버전 <= 11(작성 당시 최신 버전)에서는 작동하지 않습니다.

중요한 부분은 다음과 같습니다.

xmlns:ng- 네임스페이스 - 각 사용자 정의 태그에 대한 네임스페이스를 지정해야 합니다.
document.createElement(yourTagName) - 사용자 정의 태그 이름을 만듭니다. 이는 이전 버전의 IE에서만 발생하는 문제이므로 로드 조건을 지정해야 합니다. 네임스페이스가 없고 HTML에 정의되지 않은 모든 태그에 대해 IE가 인식할 수 있도록 미리 선언해야 합니다.

버전 정보

IE는 비표준 태그 요소에 많은 문제가 있습니다. 이러한 문제는 크게 두 가지 범주로 나눌 수 있으며 각 범주에는 고유한 솔루션이 있습니다.

태그 이름이 my:로 시작하면 XML 네임스페이스로 간주되며 해당 네임스페이스 선언이 있어야 합니다
태그에 : 기호가 없지만 표준 HTML 태그가 아닌 경우 document.createElement('my-tag')를 사용하여 미리 생성해야 합니다.
CSS 선택기를 사용하여 사용자 정의 태그의 스타일을 변경하려는 경우 네임스페이스 유무에 관계없이 document.createElement('my-tag')를 사용하여 미리 생성해야 합니다.

좋은 소식

좋은 소식은 이러한 제한 사항이 요소 태그 이름에만 적용되고 요소 속성 이름에는 적용되지 않는다는 것입니다. 따라서 IE에서는 특별한 처리가 필요하지 않습니다:

그렇지 않으면 어떻게 되나요?

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입니다. 예를 들어, 스스로 닫는 태그
입니다. /는 선택사항이지만
태그는 하위 요소를 가질 수 없습니다. 브라우저는
일부 텍스트
를 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>

로그인 후 복사