Test the ANGULARJS compatibility of IE browser to JavaScript

Last Update:2017-02-28 Source: Internet

Author: User

Tags tag name versions xmlns

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

This article mainly introduces the way to test the ANGULARJS compatibility of IE browser to JavaScript, although with the recent listing of WINDOWS10, IE browser will become a history ... Need friends can refer to the next

Short version

To ensure that angular applications can work on IE, please confirm:

1. Polyfill json.stringify on IE7 or earlier versions. You can use JSON2 or JSON3 to Polyfills.

<!doctype html> <html xmlns:ng="http://angularjs.org"> <head>  </head> <body> ... </body> </html>

2. Add id= "Ng-app" to the root element at the junction, using the Ng-app property

<!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> (using the property version <div ng-view>), or

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

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

5. Use the Ng-style tag to replace the style= "{{somecss}}". Subsequent versions can work under Chrome and Firefox but not in IE version <=11 (the latest version of this article).

Important parts are:

xmlns:ng-namespaces-You need to specify a namespace for each custom tag.
Document.createelement (yourtagname)-Create a custom tag name-as this is only a problem for older versions of IE, you need to specify the load condition. For each label that does not have a namespace and is not defined in HTML, you need to declare it in advance to make IE recognizable.

Version information

IE has many problems with nonstandard label elements. These problems can be grouped into two broad categories, each of which has its own solution.

If the tag name starts with my: Then he will be treated as an XML namespace and must have a corresponding namespace declaration
If the label is not: symbol but not a standard HTML tag, you must create it in advance using document.createelement (' My-tag ').
If you plan to change the style of custom tags with CSS selectors, you have to create them in advance with document.createelement (' My-tag '), regardless of namespace.

Good news

The good news is that these restrictions apply only to element tag names and not to element property names. Therefore, there is no need for special processing in IE: <div my-tag your:tag></div>
What would happen if I didn't?

If you use the HTML unknown tag mytag (My:tag or My-tag results are the same):

The DOM should be parsed as follows:

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

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

But that's not true in IE (if you don't include the previous revision)

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

In IE, the BODY element has three child elements:

1, a self-closing mytag. such as self-closing labels
。 /is optional, but
The label is not allowed to have child elements, the browser will
Some text
As a label of three peers, and some text is not
's child elements.

2, a text node some text. Above this should be the mytag of the child, not the sibling label

3. A damaged self-closing/mytag. This is a corrupted element because the element name is not allowed with/character. In addition, the element that the seed closes is not part of the DOM, it is simply the structure used to describe the DOM.

CSS-style custom tag naming

To ensure that the CSS selector works on a custom element, the name of the custom element must be created in advance using document.createelement (' My-tag ') without concern for the XML namespace.

<html xmlns: ng = "needed for ng: namespace"> <head> <!-[if lte IE 8]> <script> // Make sure ng-include is parsed normally. document.createElement ('ng-include' ); // Requires 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>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More