AngularJs IE Compatibility 兼容老版本IE_AngularJS

Internet Explorer Compatibility

一、总括

  这文章描述Internet Explorer(IE)处理自定义HTML属性、标签的特性(可以理解为“特别糟糕的性质”)。如果我们打算让应用兼容IE8以及以下的版本,那么可以继续往下看。

二、Short Version(简述)

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

  1. 按需引入JSON.stringify(IE7或以下的都需要这玩意)。我们可以使用JSON2(https://github.com/douglascrockford/JSON-js)或者JSON3(http://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>

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索angularjs
, ie
Compatibility
angularjs ie8 兼容、angularjs ie9 兼容性、angularjs 1.5兼容ie8、angularjs兼容ie9、angularjs2.0兼容ie8,以便于您获取更多的相关知识。

时间: 2024-09-20 00:01:17

AngularJs IE Compatibility 兼容老版本IE_AngularJS的相关文章

WindowsPhone7将不兼容老版本应用程序

3月6日消息,微软称,它的新的智能手机软件Windows Phone 7与过去"彻底决裂".现在,这个决裂如何彻底已经非常清楚了:预计在今年晚些时候发布的新手机将不能运行任何为老版本的微软手机软件编写的应用程序. 微软负责与外部软件开发人员进行协调的官员Charlie Kindel星期四在博客中说,为了使新的移动操作系统软件尽可能地更强大和用户友好,放弃支持老版本的应用程序是必要的. 这个消息可能使那些已经为本公司员工配备的Windows手机创建了自己的应用程序的企业感到最失望.这个消

如何解决win8系统不兼容老游戏

  一.修改兼容性 1.首先你需要找到游戏的锁在目录,然后右键点选运行游戏的图标,在属性选项卡中找到兼容性选项,选择兼容XP模式,之后退出重新运行游戏. 二.使用软件工具 下载虚拟机,虚拟成windows95/98等系统再运行. 下载模拟器,把游戏平台干脆变成现在Windows平台的一个软件运行. 三.DX兼容问题 下载DX9,DX9是XP系统版本时期的版本,该时期大量涌入了诸多经典游戏作品,大多你所选择怀旧的游戏都在这个年代产生.把DX9全部的兼容文件安装完毕,也许能解决你不少问题. 四.游戏

Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器_python

最近在做的一个项目中需要使用到HTML5中引入的WebSocket技术,本来以为应该很容易就能搞定,谁知道在真正上手开发了以后才发现有很多麻烦的地方,虽然我们是一个以前端开发和设计见长的团队,而且作为一个二手程序猿又长期不被待见,但是为了让有同样需求的朋友少走些弯路,我还是决定把实现方法贴在这个地方. 关于WebSocket的基本概念,维基百科上解释的很清楚,而且网上也能搜出来一大把,这里就略过不表,直接进入正题. 这次的问题首先有一个前提,就是得用Python来实现这个服务器,如果对具体语言没

兼容低版本 IE 的 JScript 5.5 实现

js|jscript IE 5.5 中的 JScript 版本是 5.5 版,它比以前版本的 JScript 中多了如数组的 push.pop.shift.unshift 方法和 encodeURI.decodeURI 等一些重要的函数.而这些增加的内容在目前其他浏览器(如 Moziila/Firefox 和 Opera)上也同样支持.因此目前开发网站一般对于 IE 浏览器只能兼容到 5.5 版,而对于更低版本的 IE(如 IE 5.IE 4 等),则不再去考虑了.虽然这些低版本的 IE 浏览器

兼容低版本IE的JScript5.5实现

js|jscript 作者Blog:www.coolcode.cn IE 5.5 中的 JScript 版本是 5.5 版,它比以前版本的 JScript 中多了如数组的 push.pop.shift.unshift 方法和 encodeURI.decodeURI 等一些重要的函数.而这些增加的内容在目前其他浏览器(如 Moziila/Firefox 和 Opera)上也同样支持.因此目前开发网站一般对于 IE 浏览器只能兼容到 5.5 版,而对于更低版本的 IE(如 IE 5.IE 4 等),

使用@Page指令的Src属性 简化对老版本的asp.net程序的维护

asp.net|程序      转眼间,距离微软推出.net平台已经4年了,.net也经历了 从 1.0 到 1.1 再到2.0的升级. 由于 asp.net 2.0 和vs 2005 IDE的各种优越特性的吸引,大伙都忙着学习2.0,将项目升级至vs 2005 下面开发. 但实际上,很多项目由于种种原因,无法升级到新版本.随着时间的变迁,老版本的项目维护问题越来越让人头痛.虽然.net诞生时间不长,但4年的时间足够积累一量的项目.    我手上就有个用vs.net 2002开发的项目,由于种种

Vista双系统中重新安装以前老版本系统

装过vista双系统或多系统的朋友都应该知道,先装vista系统,在装其他老版本的系统,经无法识别进入vista系统,然而先装老版本的系统再装vista却没有问题,只不过启动菜单不认识老版 本系统名,用"以前老版本windows系统"代替XP/2000/98/ME等老版本系统名. 双系统或多系统,难免会因为病毒等原因,出现某系统崩溃的情况,如果有还原,那就好办,如果是要重新安装vista,也好办,常规安装就可,可是如果崩溃的是老版本的系统,重装修复都不行. 是不是非要全新安装老版本的系

兼容低版本IE的JScript 5.5实现

IE 5.5 中的 JScript 版本是 5.5 版,它比以前版本的 JScript 中多了如数组的 push.pop.shift.unshift 方法和 encodeURI.decodeURI 等一些重要的函数.而这些增加的内容在目前其他浏览器(如 Moziila/Firefox 和 Opera)上也同样支持.因此目前开发网站一般对于 IE 浏览器只能兼容到 5.5 版,而对于更低版本的 IE(如 IE 5.IE 4 等),则不再去考虑了.虽然这些低版本的 IE 浏览器目前已经不是主流,但如

较老版本 AFNetworking 使用心得

较老版本的 AFNetworking 下载链接 http://pan.baidu.com/s/14Cxga 将压缩包中的文件夹拖入xcode工程项目中并引入如下的框架   简单的 JOSN 解析例子     static NSString *serverAddress = @"http://m.weather.com.cn/data/101110101.html"; // 1.创建JSON操作对象     AFJSONRequestOperation *operation =