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