AngularJS 的 IE 兼容性

最新推荐文章于 2024-06-23 17:16:57 发布
最新推荐文章于 2024-06-23 17:16:57 发布
阅读量6.4k 收藏
点赞数
分类专栏： AngulaJS 文章标签： angularjs ie

备注：AngularJS 1.3抛弃了对IE8的支持。可以在我们的博客上了解更多内容。AngularJS 1.2将继续支持IE8，但核心团队已经不打算在解决IE8及之前版本的问题上花时间。

本文档介绍了互联网浏览器（IE）在处理自定义HTML标签及属性时的特点。如果你正计划在IE8或更早的浏览器上部署Angular应用请阅读本文。

项目目前支持且将尝试修复IE9以上的bug 。持续集成服务器在IE9，IE10和IE11上运行所有的测试。详细内容参加Travis CI及ci.angularjs.org。

我们不在IE8及之前的浏览器上运行测试。一些AngularJS的功能子集也许能够在在这些浏览器上工作，但这将由你来测试并决定它在你的特定应用上是否工作。

 Garfielt
Garfielt
翻译于 2年前

3人顶

顶 翻译的不错哦!

短版本

为确保Angular应用在IE上能够工作请确认：

1. 在IE7或更早的版本上polyfill JSON.stringify。你可以使用JSON2或JSON3来polyfills。

?
1
2
3
4
5
6
7
8
9
10
11
<! 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属性

?
1
2
3
4
<! doctype  html>
   < html  xmlns:ng = "http://angularjs.org"  id = "ng-app"  ng-app = "optionalModuleName" >
     ...
   </ html >

3. 你不能使用自定义的元素标记，像<ng:view>(使用属性版本<div ng-view>来代替)，或

4. 如果你必需要用自定义元素标记，然后你必须采取以下步骤以确保IE8及之前版本都能用：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<! 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. 使用ng-style标记来替代style="{{ someCss }}"。后续的版本能够在Chrome和Firefox下工作但不能在IE版本＜＝11下工作（在撰写本文时的最新版本）。

 Garfielt
Garfielt
翻译于 2年前

2人顶

顶 翻译的不错哦!

重要部分是:

  • xmlns:ng- 命名空间- 你需要为每一个自定义标签指定一个命名空间。

  • document.createElement(yourTagName)- 创建自定义标签名 - 因为这只是对旧版本IE的问题，所以你需要指定加载条件。对于每一个没有命名空间并且在HTML中没有定义的标签，你需要提前声明以使得IE识别。

版本信息

IE对非标准的标签元素有很多问题。这些问题可以归为两大类别，每一类别都有自己的解决办法。

  • 如果标签名以my：开头那么他会被当做XML命名空间并且必须有对应的命名空间声明<html xmlns:my="ignored">

  • 如果标签没有：符号但是不是标准HTML标签，那么必须提前使用document.createElement('my-tag')创建。

  • I如果你计划用CSS选择器改变自定义标签的样式，那么不管有没有命名空间你都得提前用document.createElement('my-tag')创建.

 captain-cao
captain-cao
翻译于 2年前

1人顶

顶 翻译的不错哦!

好消息

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

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

假如你使用HTML的未知标记mytag（my:tag或者my-tag结果是相同的）：

?
1
2
3
4
5
< html >
     < body >
       < mytag >some text</ mytag >
     </ body >
   </ html >

应该解析出如下的DOM：

?
1
2
3
4
5
#document
   +- HTML
      +- BODY
         +- mytag
            +- #text: some text

预期的行为是BODY元素有一个mytag子元素，它带有一些文字。

但是在IE中不是这样的（如果没有包含上面的修订）

?
1
2
3
4
5
6
#document
   +- HTML
      +- BODY
         +- mytag
         +- #text: some text
         +- /mytag

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

1，一个自关闭的mytag。例如自关闭标签<br/>。/是可选的，但是<br>标签是不允许有子元素的，浏览器将<br>some text</br>视为三个同辈的标签，而some text并不是<br>的子元素。

2，一个文本节点some text。在上面这应该是mytag的子元素，而不是同辈标签

3.一个损坏的自关闭的/mytag。这是一个损坏的元素因为元素名称是不允许带/字符的。另外，这种子关闭的元素并不是DOM的一部分，它仅仅是用于描述DOM的结构。

 地狱星星
地狱星星
翻译于 2年前

1人顶

顶 翻译的不错哦!

CSS风格的自定义标记命名

为确保CSS选择器能够在自定义元素上工作，自定义元素的名称必须预先使用document.createElement('my-tag')创建，不需顾虑XML的命名空间。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
< 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 >


源引：http://www.oschina.net/translate/angularjs-ie-compatibility

alex8046
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AngularJS进阶 三十五 浏览器兼容性解决之道
qq_43667184的博客
01-28 327
AngularJS进阶 三十五 浏览器兼容性解决之道
AngularJS进阶(三十五)浏览器兼容性解决之道_angular js支持的火狐浏览器版本
m0_61549953的博客
04-21 744
后期测试阶段，Boss提出要做到主流浏览器(例如：360浏览器、qq浏览器、IE)兼容。当然，这并不表示一定不能在IE8用，但是官方不在针对IE8对集成测试，如果确实需要在兼容IE8的同时使用1.3，就需要自己做全面测试。所以，在工程实践中，一般以IE8为分界，如果需要兼容，就用1.2，否则就用1.3+。注意：为防止JQuery与现有js框架抢夺$标识符，要执行jQuery.noConflict()。同上，在适当的地方添加LockTableHead()函数调用即可。初次尝试设置IE10的兼容性选项，无解。
AngularJs兼容IE6-IE7-IE8
04-14
项目需要、在网上查找angularjs支持ie低版本的问题（主要是windows7下只有IE8）整理了一个小demo 主要两点 1、ng-app="myApp" id="test11" 加上id="XXX" 加入以下代码注册到页面上 angular.element(document).ready(function () { angular.bootstrap(document.getElementById("test11"), ["myApp"]); }); 2、控制器末尾加入： .config(function ($sceProvider) { $sceProvider.enabled(false); }); 备注：还有一种方式单模块的参见我的文件中另一个html页面
让AngularJS兼容IE8及其以下浏览器版本的方法
热门推荐
jumtre的专栏
12-22 1万+
AngularJS 1.3抛弃了对IE8的支持，但AngularJS 1.2将继续支持IE8，但核心团队已经不打算在解决IE8及之前版本的问题上花时间。本文档介绍了互联网浏览器（IE）在处理自定义HTML标签及属性时的特点。如果你正计划在IE8或更早的浏览器上部署Angular应用请阅读本文。 项目目前支持且将尝试修复IE9以上的bug 。持续集成服务器在IE9，IE10和IE11上运行所有
全面分析一下前端框架Angular的来龙去脉，分析angular的技术要点和难点，以及详细的语法和使用规则，底层原理-小白进阶之路
最新发布
zhang9880000的博客
06-23 2324
Angular 是一个由 Google 维护的开源前端框架。它最早在 2010 年发布，最初版本称为 AngularJS。2016 年，团队发布了一个完全重写的版本，称为 Angular 2，之后的版本（如 Angular 4、Angular 5 等）都统称为 Angular。Angular 使用 TypeScript 编写，提供了静态类型检查、现代 JavaScript 特性等优点，有助于提高代码质量和开发效率。采用组件式开发，将应用程序分割成独立的、可复用的组件，每个组件包含自己的模板、样式和逻辑。使用
Angularjs兼容低版本IE
巴黎的妖
09-18 3097
注：AngularJS1.3已经不支持IE8（包括IE8）以下的浏览器。更多信息请查看 我们的Blog 。AngularJS 1.2将继续支持IE8，但核心团队不会花时间去解决IE8或更早的IE浏览器问题。 本文是介绍针对IE浏览器的特征来处理HTML属性和标签。如果你想在IE8或者更早的浏览器的应用中使用AngularJS的话，这篇文章非常适合你。 该项目目前支持IE9+了，并会
angular 兼容IE浏览器
weixin_33913332的博客
01-10 923
angular 兼容IE浏览器 安装classlist、babel-polyfill： npm install --save classlist.js npm install --save babel-polyfill 修改 src 文件夹下的 polyfill.ts 文件： /** * This file i...
AngularJS的IE浏览器兼容性
wjxbj的博客
04-05 526
一.概览        如果你要让你的AngularJS应用兼容IE8和IE8以下的版本的话，你需要做一些特殊处理。   二.简易版 要让你的AngularJS应用在IE中正常运行你必须：     a.确保JSON字符串能被正常解析（IE7需要），你可以使用JSON2或者JSON3来实现。    b.不能使用自定义的元素标签，如&lt;ng:view&gt;（你只能使用属性的形式，如&...
测试IE浏览器对JavaScript的AngularJS的兼容性
12-12
html xmlns:ng="http://angularjs.org"> <head> <!--[if lte IE 7]> [removed][removed] <![endif]--> </head> <body> ... </body> </html> 2. 在连接
AngularJs IE Compatibility 兼容老版本IE
10-21
关于AngularJs与IE浏览器的兼容性问题，尤其是老版本的IE如IE8等，已经成为了许多前端开发者的头痛之事。AngularJs是一个非常流行的前端框架，但是由于IE浏览器的老旧特性，导致它在处理AngularJs创建的自定义标签和...
使用了angular js IE9以下浏览器的适配问题。
Sophiego的博客
05-11 3190
使用了angular js 作为整个项目的框架，浏览器只能适配到IE9了，那么问题来了，对grome,firefox等这些浏览器来说，没有问题，但对IE浏览器就麻烦了，若你的IE浏览器版本低，它总会以最低版本来识别，识别到IE7就麻烦了，一句meta标签搞定。 这句话的意思是，如果支持Grome插件，就用插件来渲染。若为IE浏览器就用IE最高版本来渲染，这样只要浏览器版本较高，加上这句话
AngularJS解决IE7及IE7以下不兼容
04-29
AngularJS是google新出来的DOM绑定前端技术，在简单易用的情况下也带来了兼容性的问题，按照普通的使用方式，Angularjs标签在IE7及IE7以下浏览器无法识别，本小项目虽小，却包含解决兼容的方法，欢迎大家下载，有不懂可以随时联系我
angularjs兼容低版本IE浏览器（IE8）
weixin_34163741的博客
11-24 363
angularjs在1.3之后的版本都是选择放弃对IE8及更低IE版本的支持，但是就目前的开发形式来看，IE8的使用客户还是蛮多的，最近有个项目要求尽量使用angularjs来写，项目一开始，就遇到了这个兼容低版本IE 让人头疼的问题，经过在网上的各种寻找，没找到一篇能让我这个angularjs新手很快解决问题的文，最后是综合了各种文，各种分析总结才解决的 首先是版本问题，第一个要解决的就...
angularJS与IE8整合简介
pkpk20044的博客
08-25 1万+
前言 本文主要研究的是angularJS框架在IE8下兼容性的问题，分析了导致angularjs框架在ie8下不能使用的各个因素，并逐个分析、解决它，并提出angularjs在IE8下统一的解决方案。 本文目的 1.提供angularJS在IE8下兼容性的统一解决方案。 兼容性说明  编号 标题名称 描述 1 ang
angular8兼容ie
榴莲不好吃的专栏
12-10 3357
以下是angular8兼容ie10及其以上版本，win10的话兼容自带的浏览器 1.pollyfills.ts添加下面两行 import 'classlist.js'; // npm install --save classlist.js import 'web-animations-js'; // npm install --save web-animations-js 2.tsco...
关于angularjs在IE里的坑——F12工具打开，功能正常，关闭之后，angularjs not working...
weixin_30546933的博客
07-01 248
前端时间在做项目的时候，用到了angularjs，期间，发现了一个奇葩的问题，就是在IE11浏览器下,点击下方图1上箭头所示的位置，将此处的开关变为图2中箭头所示的样子，但是发觉没有反应，开关还是灰色的，只有打开F12开发者工具的时候，开关按钮就变为绿色打开状态了。 图1 图2 后来发现在F12没有打开时点击按钮时后台请求成功后，重新获取列表的请求根本没有发送，也就是说get请求不发送，究其...
angular浏览器兼容性问题解决方案
贪婪的君子
07-13 1696
问题：edge浏览器下，固定列的边框消失 原因：ng-zorro-antd表格组件使用nzLeft和nzRight指令固定的表格列，这两个指令的实现css3中的标签： position: -webkit-sticky !important; position: sticky !important; 谷歌、火狐及-webkit-内核的浏览器均支持该属性（css3），IE不支持该属性，所以在IE中，会自动降级，表格无固定列，可滑动的形式。 Edge浏览器在1703之后的版本使用了chromium内核，对css
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值