Test IE browser compatibility with JavaScript's AngularJS

Test IE browser compatibility with JavaScript's AngularJS_AngularJS

WBOY

Release： 2016-05-16 15:53:47

Original

1154 people have browsed it

Short version

To ensure that Angular applications can work on IE please confirm:

1. Polyfill JSON.stringify on IE7 or earlier. You can use JSON2 or JSON3 for polyfills.

<!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>

Copy after login

2. Add id="ng-app" to the root element at the connection point and use the ng-app attribute

<!doctype html>
 <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
  ...
 </html>

Copy after login

3. You cannot use custom element tags like (use the attribute version

instead), or

4. If you must use custom element tags, then you must take the following steps to ensure that IE8 and earlier versions can be used:

<!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>

Copy after login

5. Use ng-style tag instead of style="{{ someCss }}". Subsequent versions will work under Chrome and Firefox but not IE versions <= 11 (the latest version at the time of writing).

The important part is:

xmlns:ng- namespace - You need to specify a namespace for each custom tag.
document.createElement(yourTagName) - Create a custom tag name - since this is only an issue with older versions of IE, you need to specify the loading conditions. For every tag that has no namespace and is not defined in HTML, you need to declare it in advance for IE to recognize it.

Version information

IE has a lot of problems with non-standard tag elements. These problems can be divided into two broad categories, each with its own solutions.

If the tag name starts with my: then it will be regarded as an XML namespace and must have a corresponding namespace declaration
If the tag does not have a : symbol but is not a standard HTML tag, it must be created in advance using document.createElement('my-tag').
If you plan to use CSS selectors to change the style of a custom tag, you must create it in advance using document.createElement('my-tag') regardless of whether it has a namespace or not.

Good news

The good news is that these restrictions only apply to element tag names and not to element attribute names. Therefore, no special processing is required in IE:

What will happen if I don't?

If you use HTML’s unknown tag mytag (the results of my:tag or my-tag are the same):

 
<html>
  <body>
   <mytag>some text</mytag>
  </body>
 </html>

Copy after login

should parse the following DOM:

#document
 +- HTML
   +- BODY
    +- mytag
      +- #text: some text

Copy after login

The expected behavior is that the BODY element has a mytag child element with some text.

But this is not the case in IE (if the above revision is not included)

#document
 +- HTML
   +- BODY
    +- mytag
    +- #text: some text
    +- /mytag

Copy after login

In IE, the BODY element has three child elements:

1, a self-closing mytag. For example, the self-closing tag
. / is optional, but the
tag is not allowed to have child elements. The browser treats
some text
as three sibling tags, while some text is not
child elements.

2, a text node some text. In the above this should be a child element of mytag, not a sibling tag

3. A corrupted self-closing /mytag. This is a broken element because / characters are not allowed in element names. In addition, this sub-closed element is not part of the DOM, it is only used to describe the structure of the DOM.

CSS style custom tag naming

To ensure that CSS selectors can work on custom elements, the name of the custom element must be created in advance using document.createElement('my-tag'), regardless of the XML namespace.

<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>

Copy after login