文档章节

AngularJs学习笔记--IE Compatibility 兼容老版本IE

武文海
 武文海
发布于 2015/02/06 10:49
字数 1137
阅读 92
收藏 8

Short Version(简述)

  为了让我们的angular应用在IE上工作,请确保:

  1. 按需引入JSON.stringifyIE7或以下的都需要这玩意)。我们可以使用JSON2https://github.com/douglascrockford/JSON-js)或者JSON3http://bestiejs.github.com/json3/)。

  2. 不要使用自定义标签,诸如<ng:view>(用属性版代替,如<div ng-view>)。如果还是想使用,则请看第3点。

  3. 如果你确实想使用自定义标签,那么你必须做以下步骤,让老IE认识你的自定义标签。

<html xmlns:ng="http://angularjs.org">
<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>

需要关注的是:

  • xmls:ng - 命名空间 对于每一个我们计划使用的自定义标签,都需要有一个命名空间。

  • document.createElement(“自定义标签名称”) - 自定义标签名称的创建 因为这是旧版IE一个问题,我们需要通过IE判断注释(<!--[if lte IE 8]>…<![endif]-->)来特殊处理。对于每一个没有命名空间或者非HTML默认标签,都需要进行这种预定义,以让IE不会犯傻(例如没样式…)。

Long Version(详情)

  IE对于非标准HTML标签的处理会有问题。这大致可以氛围两类(有、无命名空间),每一类都有他自己的一个解决方式。

  • 如果标签名称以”my:”开头的话,将被当作命名空间,必须要一个想对应的命名空间定义(<html xmlns:my=ignored>)。

  • 如果标签没有命名空间(xx:开头),但并非一个标准的HTML的话,需要通过document.createElement(“标签名称”)进行声明。

  • 如果我们打算对自定义标签定义样式的话,我们必须使用document.createElement(“标签名称”)来进行自定义,regardless of XML命名空间(实验证明,regardless of XML namespace意思很有可能是:不用管有命名空间的自定义标签)。

The Good News(好消息)

  好消息是,这个限制仅仅是对于元素名称的,对属性名称没影响。所以不需要对自定义属性(<div> my-tag your:tag></div>)做特殊处理。

What happens if I fail to do this?(没做这些处理的话,会发生什么事呢?!)

  假设我们有一个非标准的HTML标签(对于my:tag或者my-tag都有一样的结果。但测试过后,发现命名空间方式不会有这种烦恼)。

<html>
    <body>
        <mytag>some text</mytag>
    </body></html>

一般来说,将会转换为一下的DOM结构:

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

   我们期望的,是BODY元素有一个mytag子元素,mytag又有一个文本子元素”some text”。

 

  但IE不是这么干的(如果做了纠正措施,则不包括在内)!

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

   在IE里面,BODY将会有3个孩子元素:

  1. 一个自闭合的” mytag”,与<br/>类似。末尾的“/”是可选的,但<br>标签不允许有任何子元素,所以浏览器将其分为<br>some text</br>三个兄弟元素,而不是单独的<br>元素中含有some text元素。

  2. 一个文本节点“some text”。这本来应该是mytag元素的子节点,不是它的兄弟节点。

  3. 一个错误的自闭合标签” /mytag”,说它错误,是因为元素名称不允许含有”/”字符(在最后应该是允许的<br/>)。此外,闭合元素不应该是DOM的一部分(不应该以元素形式出现),因为它只用作勾画DOM结构的边界。

 

六、CSS Styling of Custom Tag Names(对自定义标签进行CSS样式定义)

  如果想让CSS选择器对自定义元素有效,那么自定义元素必须通过document.createElement(“元素名称”)进行预定义,regardless of XML namespace(实验证明,这里是不用管有XML命名空间的?!)

  这里是自定义标签样式定义的例子:

<!DOCTYPE html>
<html xmlns:ng="needed for ng: namespace">
<head>
    <title>IE Compatbility</title>
    <!--[if lte IE 8]>
    <script>
        // needed to make ng-include parse properly
        document.createElement('ng-include');

        // needed to enable CSS reference
        document.createElement('ng:view');//注释掉也可以?!
    </script>
    <![endif]-->
    <style>
        ng\:view {
            display: block;
            border: 1px solid red;
            width:100px;
            height:100px;
        }

        ng-include {
            display: block;
            border: 1px solid blue;
            width:100px;
            height:100px;
        }
    </style>
</head>
<body>
    <ng:view></ng:view>
    <ng-include></ng-include>
</body>
</html>


本文转载自:http://www.cnblogs.com/lcllao/archive/2012/09/21/2696206.html

武文海
粉丝 13
博文 97
码字总数 49318
作品 0
成都
高级程序员
私信 提问
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
0
0
为处理升级过程的问题 Angular 5 将会推迟发布

开发团队目前公布的 Angular 5 发布日期是 10 月 23 日,该版本的重点是构建渐进式的 Web 应用程序(Progressive Web Apps)。 Angular 5 是由谷歌开发的流行 JavaScript 框架的下一个版本,原...

局长
2017/09/19
1K
15
在 Angular 8 中,我们可以期待些什么

转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 本文由葡萄城翻译并发布 --- Angular 作为一款优秀的前端框架,自诞生之日起,就致力于面向前...

葡萄城技术团队
04/15
0
0
AngularJS 1.3.0 即将发布,不再支持 IE 8

AngularJS 1.3.0 即将发布,该版本最值得关注的就是不再支持 IE 8 浏览器,因为删除了一些对老的浏览器的兼容代码,使得 AngularJS 的速度得以大幅提升。此外该版本移除了废弃的 API;采用新...

oschina
2013/12/15
7.5K
10
AngularJS 1.2.20/1.3.0 Beta15 发布

AngularJS 今天发布两个更新版本,分别是稳定版的 1.2.20 和 1.3.0 Beta15 测试版本。 其中 1.2.20 包含七百多个 commit ,详细列表请看这里。 下载地址:https://github.com/angular/angula...

oschina
2014/07/12
1K
1

没有更多内容

加载失败,请刷新页面

加载更多

Jenkins系列_插件安装及报错处理

进入Jenkins之后我们可以进行插件的安装,插件管理位于以下模块: 发现上面报了一堆错误,是因为插件的依赖没有安装好,那么这一节,就先把这些错误解决掉吧。解决完成后,也就基本会使用插件...

shzwork
今天
2
0
mysql mysql的所有查询语句和聚合函数(整理一下,忘记了可以随时看看)

查询所有字段 select * from 表名; 查询自定字段 select 字段名 from 表名; 查询指定数据 select * from 表名 where 条件; 带关键字IN的查询 select * from 表名 where 条件 [not] in(元素...

edison_kwok
昨天
9
0
解决多线程并行加载缓存问题(利用guava实现)

依赖 com.google.guava:guava:20.0 import com.google.common.cache.Cache;import com.google.common.cache.CacheBuilder;import java.util.concurrent.ExecutionException;import j......

暗中观察
昨天
3
0
利用VisualVM 内存查看

准备工作,建几个测试类。等下就是要查看这几个类里面的属性 package visualvm;public class MultiObject { private String str; private int i; MultiObject(String str...

冷基
昨天
2
0
组装一台工作游戏两用机

一、配置清单如下: 分类 项目 价格(元) 主板 华硕(ASUS)TUF Z370-PLUS GAMING II 电竞特工 Z370二代 支持9代CPU 1049 CPU 英特尔(Intel) i7 8700K 酷睿六核 盒装CPU处理器 2640 风扇 九...

mbzhong
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部