Angularjs兼容低版本IE

悠悠 2022-09-26 02:41 275阅读 0赞

注：AngularJS1.3已经不支持IE8（包括IE8）以下的浏览器。更多信息请查看 [我们的Blog][Blog] 。AngularJS 1.2将继续支持IE8，但核心团队不会花时间去解决IE8或更早的IE浏览器问题。

本文是介绍针对IE浏览器的特征来处理HTML属性和标签。如果你想在IE8或者更早的浏览器的应用中使用AngularJS的话，这篇文章非常适合你。

该项目目前支持IE9+了，并会修复相应的BUG。持续集成服务器在IE9，IE10，和IE11运行所有的测试请看 [Travis CI][] 和 [ci.angularjs.org][] 。

我们没有在IE8及以下浏览器上测试。用AngularJS功能的子集可以工作在这些浏览器，但它是由你来测试和决定是否适用于您的特定的APP。

## 简单版本 ##

为了能让您的AngularJS应用能正常运行在IE上，请确保如下：

1，你需要为IE7及以下浏览器添加JSON.stringify方法。可以使用 [JSON2][] 或 [JSON3][]。

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

2，给根元素添加id=”ng-app”属性与ng-app属性结合起来。

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

3，不要使用自定义元素标签，比如<ng:view>，使用<div ng-view>来取代。

4，如果你想使用自定义元素标签，你必须在IE8及以下浏览器中添加下面的代码：

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

5，使用ng-style标签来取代style=”\{ \{someCSS\}\}”。后者能运行在chrome和Firefox，但在IE11及以下浏览器中无法运行（写作时的最新版本）。

最重要的部分：

*  xmlns:ng-命名空间-你需要为你所有计划要使用的常见标签创建命名空间。

*  document.createElement(yourTagName) -创建自定义的标签名称-因为这个问题只在IE老版本浏览器中存在，所以你只需要有条件的加载它。对于那些不支持命名空间和自定义HTML标签的浏览器，你需要预处理来让它在IE中正常的运行。

## 长版本 ##

IE中不支持非标准标签的问题，可以分为两种，每种都有相应的解决办法

如果标签名以my:前缀开头，它会被认为是一个XML命名空间，所以必须在<html xmlns:my=”ignored”>进行相应的命名空间声明。

如果标签没有：，但它不是一个标准的HTML标签，那么它必须使用document.createElement(‘my-tag’)预先创建。

如果你计划在自定义标签中使用CSS选择器，那么无论哪个xml命名空间，你必须使用 document . createElement ( ‘my-tag’ ) 来预创建标签

## 好消息 ##

好消息是，这些限制只适用于元素标记名称，而不是元素的属性名称。因此 <div   my-tag   your:tag ></div> 在IE中是不需要进行特殊处理的。

## 如果我不这样做，会发生什么？ ##

如果你的HTML有未知的标签mytag(可能是my:tag或者my-tag类似的)

它被解析成下面的DOM结构：

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

我们想要的是BODY元素下有一个子元素mytag，mytag里面包含some text文本。 但在IE中不会解析成上面的样子（如果没有进行上面的修复的行为的话）

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

在IE中，body元素中有三个子元素：

1，自闭标签。比如自闭标签<br/>，标签中/是可选的，但<br>标签不允许有子元素，所以浏览器会认为是三个兄弟元素，而不是把some text作为<br>的子元素。

2，作为some text的文本节点。应该作为mytag的子元素，而不是兄弟元素。

3，损坏的自闭合标签/mytag。它是不规范的，因为元素名称不允许有/字符。此外，该自闭合标签不应该成为DOM的一部分，因为它仅用于绘制DOM的结构。

## 自定义标签中的CSS样式 ##

为了能使CSS选择器能在自定义元素中工作，无论在XML命名空间，你必须使用 document . createElement ( ‘my-tag’ ) 来预创建自定义标签名

<html xmlns:ng="needed for ng: namespace"> <head>  <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>

源引：https://docs.angularjs.org/guide/ie

[Blog]: http://blog.angularjs.org/2013/12/angularjs-13-new-release-approaches.html
[Travis CI]: https://travis-ci.org/angular/angular.js
[ci.angularjs.org]: http://ci.angularjs.org/
[JSON2]: https://github.com/douglascrockford/JSON-js
[JSON3]: http://bestiejs.github.com/json3/