Test IE browser compatibility with JavaScript's AngularJS

  • 2020-06-19 09:42:50
  • OfStack

The short version

To ensure that Angular 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>

2. Add id=" ng-ES21en "to the root element at the join, using the ng-ES23en attribute


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

3. You cannot use custom element tags like < ng:view > Use the properties version < div ng-view > "(" Instead of"

4. If you must use custom element tags, then you must take the following steps to ensure that IE8 and previous versions work:


<!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. Use the ES43en-ES44en flag instead of style="{{someCss}}". Subsequent versions will work with Chrome and Firefox but not with IE < = 11 (the latest version at the time of writing).


The important parts are:

xmlns:ng- Namespace - You need to specify 1 namespace for each custom tag. document. createElement(yourTagName)- Create custom tag names - because this is only a problem with older versions of IE, you need to specify load conditions. For each tag that has no namespace and is not defined in HTML, you need to declare it in advance so that IE recognizes it.

Version information

IE has a number of problems with non-standard tag elements. These problems can be grouped into two broad categories, each with its own solution.

If the tag name starts with my: it is treated as an XML namespace and must have a corresponding namespace declaration < html xmlns:my="ignored" > If the tag does not have: symbol but is not a standard HTML tag, it must be created in advance using ES73en. createElement(' my-ES76en '). If you plan to use the CSS selector to change the style of your custom tags, you will need to create them with document.createElement (' my-ES81en ') ahead of time, with or without namespaces.


The good news

The good news is that these restrictions apply only to element tag names and not to element attribute names. Therefore, no special treatment is required in IE: < div my-tag your:tag > < /div >
What happens if I don't?

If you use the unknown tag mytag for HTML (my:tag or ES100en-ES101en the result is the same) :


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

DOM should be resolved as follows:


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

The expected behavior is that the BODY element has 1 mytag child element with 1 bit of text.

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


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

In IE, the BODY element has three children:

1 mytag self-closing. For example, self-closing tags < br/ > . / Is optional, but < br > Tags are not allowed to have child elements, the browser will < br > some text < /br > some text is not < br > The child element of.

2,1 text node some text. Above this should be a child of mytag, not a peer tag

3.1 Damaged self-closing /mytag. This is a corrupted element because element names are not allowed with/characters. In addition, the seed-off element is not part 1 of DOM, it is only used to describe the structure of DOM.

CSS style custom tag naming

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


<html xmlns:ng="needed for ng: namespace">
  <head>
   <!--[if lte IE 8]>
    <script>
     //  Need to confirm ng-include Resolved normally 
     document.createElement('ng-include');
 
     //  Demand is enabled CSS reference 
     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>


Related articles: