Heim > Artikel > Web-Frontend > 测试IE浏览器对JavaScript的AngularJS的兼容性_AngularJS
测试IE浏览器对JavaScript的AngularJS的兼容性_AngularJS
- WBOYOriginal
- 2016-05-16 15:53:471066Durchsuche
短版本
为确保Angular应用在IE上能够工作请确认：
1. 在IE7或更早的版本上polyfill JSON.stringify。你可以使用JSON2或JSON3来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. 在连接处将id="ng-app"添加到根元素，使用ng-app属性
<!doctype html> <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName"> ... </html>
3. 你不能使用自定义的元素标记，像 4. 如果你必需要用自定义元素标记，然后你必须采取以下步骤以确保IE8及之前版本都能用： 5. 使用ng-style标记来替代style="{{ someCss }}"。后续的版本能够在Chrome和Firefox下工作但不能在IE版本＜＝11下工作（在撰写本文时的最新版本）。 版本信息 IE对非标准的标签元素有很多问题。这些问题可以归为两大类别，每一类别都有自己的解决办法。 好消息是这些限制仅仅适用于元素标记名称并不适用于元素属性名称。因此，在IE中并不需要特别的处理： 假如你使用HTML的未知标记mytag（my:tag或者my-tag结果是相同的）： 应该解析出如下的DOM： 预期的行为是BODY元素有一个mytag子元素，它带有一些文字。 但是在IE中不是这样的（如果没有包含上面的修订） 在IE中，BODY元素有三个子元素： 1，一个自关闭的mytag。例如自关闭标签 2，一个文本节点some text。在上面这应该是mytag的子元素，而不是同辈标签 3.一个损坏的自关闭的/mytag。这是一个损坏的元素因为元素名称是不允许带/字符的。另外，这种子关闭的元素并不是DOM的一部分，它仅仅是用于描述DOM的结构。 CSS风格的自定义标记命名 为确保CSS选择器能够在自定义元素上工作，自定义元素的名称必须预先使用document.createElement('my-tag')创建，不需顾虑XML的命名空间。
<!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>
重要部分是:
好消息
如果我不这样做，会发生什么？
<html>
<body>
<mytag>some text</mytag>
</body>
</html>
#document
+- HTML
+- BODY
+- mytag
+- #text: some text
#document
+- HTML
+- BODY
+- mytag
+- #text: some text
+- /mytag
。/是可选的，但是
标签是不允许有子元素的，浏览器将
some text视为三个同辈的标签，而some text并不是
的子元素。
<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>