Home >Web Front-end >JS Tutorial >Test IE browser compatibility with JavaScript's AngularJS_AngularJS

Test IE browser compatibility with JavaScript's AngularJS_AngularJS

WBOYOriginal: 2016-05-16 15:53:471150browse

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>

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>

3. You cannot use custom element tags like cbe1678e5ddae3bab5a303561ac9ed86 (use the attribute version 08c7689d8bf8fe33141f270e3fd6c1d5 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>

5. Use ng-style tag instead of style="{{ someCss }}". Subsequent versions will work under Chrome and Firefox but not IE versions

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 declaration60004671f7164bb85fa40ec764aea13c
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: ee9aa6fc82bf3c8d8eeb270a32331a7216b28748ea4df4d9c2150843fecfba68
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>

should parse the following DOM:

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

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

In IE, the BODY element has three child elements:

1, a self-closing mytag. For example, the self-closing tag 076402276aae5dbec7f672f8f4e5cc81. / is optional, but the 0c6dc11e160d3b678d68754cc175188a tag is not allowed to have child elements. The browser treats 0c6dc11e160d3b678d68754cc175188asome text0b9f73f8e206867bd1f5dc5957dbcb38 as three sibling tags, while some text is not 0c6dc11e160d3b678d68754cc175188a 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>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to implement single-page comments using Laravel with AngularJS and PHP_AngularJSNext article：How to implement single-page comments using Laravel with AngularJS and PHP_AngularJS

See more

Test IE browser compatibility with JavaScript's AngularJS_AngularJS

Related articles